H5 Canvas旋转图片及下载保存

最新推荐文章于 2024-03-28 16:40:03 发布

林一怂儿

最新推荐文章于 2024-03-28 16:40:03 发布

阅读量1k

点赞数

分类专栏： H5 文章标签： github node.js docker

本文链接：https://blog.csdn.net/linyisonger/article/details/123923586

版权

H5 专栏收录该内容

33 篇文章 3 订阅

订阅专栏

功能点

旋转角度
- 180°
- 90°
下载文件
文件名称
- QQ浏览器
- 谷歌浏览器
- Edge浏览器

知识点

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>

林一怂儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5 Canvas旋转图片及下载保存

功能点旋转角度 180° 90° 下载文件文件名称 QQ浏览器谷歌浏览器 Edge浏览器知识点a 标签 href 可以直接放 base64经验 +1哦吼~<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
复制链接

扫一扫