js base64图片旋转90度

最新推荐文章于 2024-07-31 14:11:26 发布
苏雨丶
最新推荐文章于 2024-07-31 14:11:26 发布
阅读量1w
点赞数 9
分类专栏： html5
本文链接：https://blog.csdn.net/qq_38082304/article/details/85287718
版权
html5 专栏收录该内容
8 篇文章 0 订阅
订阅专栏
在这里插入图片描述
<html>
<head>

    <style type="text/css">
        body, button {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    </style>

</head>
<body>

<div style="width:50px; height:50px; margin:100px auto;text-align:center;line-height:50px;">
    <img id ="test"/>
    <img id="img"/>
</div>
</body>
<script>
    function rotateBase64Img(src, edg, callback) {
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        var imgW;//图片宽度
        var imgH;//图片高度
        var size;//canvas初始大小
        if (edg % 90 != 0) {
            console.error("旋转角度必须是90的倍数!");
            throw '旋转角度必须是90的倍数!';
        }
        (edg < 0) && (edg = (edg % 360) + 360)
        const quadrant = (edg / 90) % 4; //旋转象限
        const cutCoor = {sx: 0, sy: 0, ex: 0, ey: 0}; //裁剪坐标
        var image = new Image();
        image.crossOrigin = "anonymous"
        image.src = src;
        image.onload = function () {
            imgW = image.width;
            imgH = image.height;
            size = imgW > imgH ? imgW : imgH;
            canvas.width = size * 2;
            canvas.height = size * 2;
            switch (quadrant) {
                case 0:
                    cutCoor.sx = size;
                    cutCoor.sy = size;
                    cutCoor.ex = size + imgW;
                    cutCoor.ey = size + imgH;
                    break;
                case 1:
                    cutCoor.sx = size - imgH;
                    cutCoor.sy = size;
                    cutCoor.ex = size;
                    cutCoor.ey = size + imgW;
                    break;
                case 2:
                    cutCoor.sx = size - imgW;
                    cutCoor.sy = size - imgH;
                    cutCoor.ex = size;
                    cutCoor.ey = size;
                    break;
                case 3:
                    cutCoor.sx = size;
                    cutCoor.sy = size - imgW;
                    cutCoor.ex = size + imgH;
                    cutCoor.ey = size + imgW;
                    break;
            }
            ctx.translate(size, size);
            ctx.rotate(edg * Math.PI / 180);
            ctx.drawImage(image, 0, 0);
            var imgData = ctx.getImageData(cutCoor.sx, cutCoor.sy, cutCoor.ex, cutCoor.ey);
            if (quadrant % 2 == 0) {
                canvas.width = imgW;
                canvas.height = imgH;
            } else {
                canvas.width = imgH;
                canvas.height = imgW;
            }
            ctx.putImageData(imgData, 0, 0);
            callback(canvas.toDataURL())
        };
    }
    var url = 'data:image/png;base64,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';
    function callback(base64data) {
        document.getElementById("img").src = base64data;
    }
    //原本的图片
    document.getElementById("test").src=url;
    //图片旋转
    rotateBase64Img(url, 270, callback);
</script>
</html>