普通 css 的旋转缩放只是样式发生旋转，图片本质上还是没有旋转缩放的，想要图片本质旋转或者缩放，需要借助 canvas 的图像生成能力
以图像旋转 90 度并且缩放 0.5 倍为例
思路
- 获取图片元素(对象)，这里也可以处理视频(video)
- 构建画布，画布的
宽高分别为图像或者视频的真实高宽 - 移动画布原点为原图的(高度,0)
- 旋转画布 90 度
- 缩放画布 0.5 倍
- 将原图画到画布上
- 将画布转成 Blob 对象传到服务器
代码
<!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" />
<title>Document</title>
</head>
<body>
<img id="img" src="kek.jpg" alt="" />
<canvas id="canvas"></canvas>
<button onclick="handle()">ok</button>
</body>
<script>
function handle() {
// 1. 获取图片元素(对象)，这里也可以处理视频(video)
const img = document.getElementById("img");
// 2. 构建画布，画布的`宽高`分别为图像或者视频的真实`高宽`
const canvas = document.getElementById("canvas");
// 如果是视频 则video.videoWidth和videoHeight
canvas.width = img.naturalHeight * 0.5; // 乘以0.5是为了缩放
canvas.height = img.naturalWidth * 0.5;
const ctx = canvas.getContext("2d");
// 3. 移动画布原点为原图的(高度,0)
ctx.translate(canvas.height, 0);
// 4. 旋转画布90度
const angle = (90 * Math.PI) / 180;
ctx.rotate(angle);
// 5. 缩放画布0.5倍
ctx.scale(0.5, 0.5);
// 6. 将原图画到画布上
ctx.drawImage(img, 0, 0);
// 7. 将画布转成Blob对象传到服务器
const fd = new FormData();
canvas.toBlob(function (blob) {
// img.src = URL.createObjectURL(blob)
fd.append("img1", blob);
// 上传接口
fetch("/api/up", {
method: "POST",
body: fd,
});
});
}
</script>
</html>
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。