H5 Canvas旋转图片及下载保存

功能点

知识点

a 标签 href 可以直接放 base64

经验 +1

哦吼~

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .download {
            width: 100px;
            height: 40px;
            background-color: #fff;
            color: #276787;
            border: 1px solid #276787;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            font-size: 12px;
            transition: all .5s;
        }

        .download:hover {

            background-color: #276787;
            color: white;
            border: 1px solid transparent;

        }

        .download:active {
            opacity: .4;
        }
    </style>

</head>

<body>
    <canvas id="canvas">
        您的浏览器不支持 HTML5 canvas 标签。
    </canvas>

    <div class="download">下载</div>


    <script>
        // 原始图像
        let originImage = document.createElement('img');

        // 画布
        let canvas = document.getElementById("canvas");
        let ctx = canvas.getContext("2d");
        // 转换后的base64
        let base64 = ''
        // 下载按钮
        let download = document.querySelector(".download");
        originImage.setAttribute("src", "http://y.linyisonger.cn/files/864326af863f45ef84d87467960420b4637743515442806146.jpg")
        originImage.crossOrigin = "anonymous";
        originImage.onload = () => {
            let ow = originImage.naturalWidth;
            let oh = originImage.naturalHeight;
            // 90度
            // canvas.width = oh;
            // canvas.height = ow;
            // ctx.width = oh;
            // ctx.height = ow;
            // ctx.rotate(-Math.PI / 2) // 逆时针90度
            // ctx.drawImage(originImage, -ow, 0)
            // ctx.rotate(Math.PI / 2) // 顺时针90度
            // ctx.drawImage(originImage, 0, -oh)
            // 180度 
            canvas.width = ow;
            canvas.height = oh;
            ctx.width = ow;
            ctx.height = oh;
            ctx.rotate(Math.PI) // 顺时针180度
            ctx.drawImage(originImage, -ow, -oh)
            base64 = canvas.toDataURL("image/jpeg", 0.5);
        }

        // 方式一
        // download.addEventListener('click', () => {
        //     let a = document.createElement('a');
        //     a.href = base64;
        //     a.download = "旋转后的图片.png";
        //     a.click();
        // })

        // 方式二
        download.addEventListener('click', () => {
            let a = document.createElement('a');
            a.href = window.URL.createObjectURL(base64ToBlob(base64));
            a.setAttribute('download', '旋转后的图片.jpg');
            a.click();
        })

        // base64 转 Blob
        function base64ToBlob(base64) {
            let arr = base64.split(',');
            let mime = arr[0].match(/:(.*?);/)[1];
            let bstr = atob(arr[1]);
            let n = bstr.length;
            let u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new Blob([u8arr], { type: mime })
        }
    </script>
</body>

</html>