关于javascript:html5图像旋转缩放并上传

9次阅读

共计 1206 个字符，预计需要花费 4 分钟才能阅读完成。

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

正文完