<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);
//獲取旋轉后的base64圖片
//canvas.toDataURL()
callback(canvas.toDataURL())
};
}
var url = 'data:image/png;base64,base64轉義后的url';
function callback(base64data) {
document.getElementById("img").src = base64data;
}
//原本的圖片
document.getElementById("test").src=url;
//圖片旋轉
rotateBase64Img(url, 270, callback);
</script>
</html>
————————————————
版權聲明：本文為CSDN博主「蘇雨丶」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_38082304/article/details/85287718