js base64图片旋转90度

系统管理员 2021-05-03 03:01 1288阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDgyMzA0_size_16_color_FFFFFF_t_70]

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MDgyMzA0_size_16_color_FFFFFF_t_70]: /images/20210502/fb4559948dcb4aec9a945d3bfb4321b3.png