前端demo: 实现对图片进行上传前的压缩功能

最新推荐文章于 2024-01-15 17:30:46 发布

Bee.Bee.

最新推荐文章于 2024-01-15 17:30:46 发布

阅读量265

点赞数

分类专栏：前端demo 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_49015558/article/details/133684732

版权

前端demo 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前端可以使用canvas和File API来对图片进行压缩和缩放处理，以下是一个示例代码 :

压缩方法compressImg这段代码是实现对图片进行上传前的压缩功能

1. 定义了一个压缩图片的函数 `compressImg`，接受两个参数：`file`表示要压缩的文件，`quality`表示压缩的质量，取值范围为0~1之间。

2. 创建了一个 Promise 对象，将压缩后的图片信息作为 Promise 的返回值。

3. 创建了一个 FileReader 对象 `reader`，用于读取文件数据。

4. 通过 `reader.onload` 事件回调函数，当文件加载完成后触发。

5. 在回调函数中，创建了一个 Image 对象 `image`，用于加载图片。

6. 使用 `image.onload` 事件回调函数，在图片加载完成后触发。

7. 在 `image.onload` 回调函数中，创建了一个 Canvas 对象 `canvas`，用于绘制图像。

8. 根据给定的最大宽高，通过计算缩放后的宽高，将图片等比例缩放到合适的尺寸，设置了 `canvas` 的宽度和高度，并使用 `drawImage` 方法将原图绘制在 `canvas` 上。

9. 使用 `canvas.toDataURL()` 将 `canvas` 中的图像转换为 base64 编码的DataURL格式的图像数据，并指定图片格式为 `image/jpeg`，质量为 `quality`。

10. 将 base64 编码的数据URL 转为二进制数据，并创建一个 Uint8Array 对象 `bufferArray`。

11. 使用循环将 base64 编码的数据填充到 `bufferArray` 中。

12. 创建一个新的 File 对象 `miniFile`，将 `bufferArray` 作为文件内容，文件名与原文件一致，文件类型为 `image/jpeg`。

13. 将压缩前后的图片信息以对象的形式返回，并调用 `resolve` 方法将该对象作为 Promise 的结果。

压缩方法compressImg的调用

1. 通过监听文件选择框的change事件，在文件选择后将选择的图片文件传入compressImg函数中进行处理

14. 在成功的回调中创建一个新的img对象，并将newFile.afterSrc赋给其src属性，这样就能在页面上显示压缩后的图像。此时对压缩后的newFile上传即可。

<!DOCTYPE html>
<html>
  <head>
    <title>Image Compression Demo</title>
    <style>
      #output {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <input type="file" id="input" accept="image/*" />
    <div id="output"></div>

    <script>
      /**
       * 压缩方法
       * @param {string} file 文件
       * @param {Number} quality  0~1之间，quality与文件大小成正比
       */
      function compressImg(file, quality) {
        return new Promise((resolve) => {
          // 创建 FileReader
          const reader = new FileReader();
          reader.onload = ({ target: { result: src } }) => {
            // 创建 img 元素
            const image = new Image();
            image.onload = async () => {
              // 计算缩放后的宽高
              var maxWidth = 500;
              var maxHeight = 500;
              var width = image.width;
              var height = image.height;
              if (width > height) {
                if (width > maxWidth) {
                  height *= maxWidth / width;
                  width = maxWidth;
                }
              } else {
                if (height > maxHeight) {
                  width *= maxHeight / height;
                  height = maxHeight;
                }
              }
              // 创建 canvas 元素
              const canvas = document.createElement("canvas");
              // 设置canvas的宽高
              canvas.width = width;
              canvas.height = height;
              // 绘制缩放后的canvas图像
              canvas.getContext("2d").drawImage(image, 0, 0, width, height);
              // 将canvas转换为DataURL格式的图像
              const canvasURL = canvas.toDataURL(`image/jpeg`, quality);
              //atob() 对经过 base-64 编码的字符串进行解码
              const buffer = atob(canvasURL.split(",")[1]);
              let length = buffer.length;
              // ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区
              // Uint8Array 数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
              const bufferArray = new Uint8Array(new ArrayBuffer(length));
              while (length--) {
                bufferArray[length] = buffer.charCodeAt(length);
              }
              const miniFile = new File([bufferArray], file.name, {
                type: "image/jpeg",
              });
              resolve({
                file: miniFile,
                origin: file,
                beforeSrc: src,
                afterSrc: canvasURL,
                beforeKB: Number((file.size / 1024).toFixed(2)),
                afterKB: Number((miniFile.size / 1024).toFixed(2)),
              });
            };
            image.src = src;
          };
          reader.readAsDataURL(file);
        });
      }
      var input = document.getElementById("input");
      input.addEventListener("change", function (event) {
        var file = event.target.files[0];
        compressImg(file, 0.5).then((newFile) => {
          console.log("newFile", newFile); // 将新的newFile上传即可
          var newImg = new Image(); // 创建新的图像对象
          newImg.src = newFile.afterSrc;

          // 在页面上显示缩放后的图像
          var output = document.getElementById("output");
          output.innerHTML = "";
          output.appendChild(newImg);
        });
      });
    </script>
  </body>
</html>