一般 css 的旋转缩放只是款式产生旋转，图片实质上还是没有旋转缩放的，想要图片实质旋转或者缩放，须要借助 canvas 的图像生成能力

以图像旋转 90 度并且缩放 0.5 倍为例

思路

  1. 获取图片元素(对象)，这里也能够解决视频(video)
  2. 构建画布，画布的宽高别离为图像或者视频的实在高宽
  3. 挪动画布原点为原图的(高度,0)
  4. 旋转画布 90 度
  5. 缩放画布 0.5 倍
  6. 将原图画到画布上
  7. 将画布转成 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>