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

    前端可以使用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上传即可。

    1. html>
    2. <html>
    3.   <head>
    4.     <title>Image Compression Demotitle>
    5.     <style>
    6.       #output {
    7.         margin-top: 20px;
    8.       }
    9.     style>
    10.   head>
    11.   <body>
    12.     <input type="file" id="input" accept="image/*" />
    13.     <div id="output">div>
    14.  
    15.     <script>
    16.       /**
    17.        * 压缩方法
    18.        * @param {string} file 文件
    19.        * @param {Number} quality  0~1之间，quality与文件大小成正比
    20.        */
    21.       function compressImg(file, quality) {
    22.         return new Promise((resolve) => {
    23.           // 创建 FileReader
    24.           const reader = new FileReader();
    25.           reader.onload = ({ target: { result: src } }) => {
    26.             // 创建 img 元素
    27.             const image = new Image();
    28.             image.onload = async () => {
    29.               // 计算缩放后的宽高
    30.               var maxWidth = 500;
    31.               var maxHeight = 500;
    32.               var width = image.width;
    33.               var height = image.height;
    34.               if (width > height) {
    35.                 if (width > maxWidth) {
    36.                   height *= maxWidth / width;
    37.                   width = maxWidth;
    38.                 }
    39.               } else {
    40.                 if (height > maxHeight) {
    41.                   width *= maxHeight / height;
    42.                   height = maxHeight;
    43.                 }
    44.               }
    45.               // 创建 canvas 元素
    46.               const canvas = document.createElement("canvas");
    47.               // 设置canvas的宽高
    48.               canvas.width = width;
    49.               canvas.height = height;
    50.               // 绘制缩放后的canvas图像
    51.               canvas.getContext("2d").drawImage(image, 0, 0, width, height);
    52.               // 将canvas转换为DataURL格式的图像
    53.               const canvasURL = canvas.toDataURL(`image/jpeg`, quality);
    54.               //atob() 对经过 base-64 编码的字符串进行解码
    55.               const buffer = atob(canvasURL.split(",")[1]);
    56.               let length = buffer.length;
    57.               // ArrayBuffer 对象用来表示通用的、固定长度的原始二进制数据缓冲区
    58.               // Uint8Array 数组类型表示一个 8 位无符号整型数组，创建时内容被初始化为 0。创建完后，可以以对象的方式或使用数组下标索引的方式引用数组中的元素。
    59.               const bufferArray = new Uint8Array(new ArrayBuffer(length));
    60.               while (length--) {
    61.                 bufferArray[length] = buffer.charCodeAt(length);
    62.               }
    63.               const miniFile = new File([bufferArray], file.name, {
    64.                 type: "image/jpeg",
    65.               });
    66.               resolve({
    67.                 file: miniFile,
    68.                 origin: file,
    69.                 beforeSrc: src,
    70.                 afterSrc: canvasURL,
    71.                 beforeKB: Number((file.size / 1024).toFixed(2)),
    72.                 afterKB: Number((miniFile.size / 1024).toFixed(2)),
    73.               });
    74.             };
    75.             image.src = src;
    76.           };
    77.           reader.readAsDataURL(file);
    78.         });
    79.       }
    80.       var input = document.getElementById("input");
    81.       input.addEventListener("change", function (event) {
    82.         var file = event.target.files[0];
    83.         compressImg(file, 0.5).then((newFile) => {
    84.           console.log("newFile", newFile); // 将新的newFile上传即可
    85.           var newImg = new Image(); // 创建新的图像对象
    86.           newImg.src = newFile.afterSrc;
    87.  
    88.           // 在页面上显示缩放后的图像
    89.           var output = document.getElementById("output");
    90.           output.innerHTML = "";
    91.           output.appendChild(newImg);
    92.         });
    93.       });
    94.     script>
    95.   body>
    96. html>

  • 相关阅读:
    Matplotlib-cpp在linux中C++代码中调用画图
    【机器学习】随机森林(Random Forest，简称 RF)：预测光伏电站功率 || 缺失数据处理 || 重复行处理...
    python画图
    Ubuntu下运行QEMU模拟riscv64跑Debian
    ＜Linux复习＞make/Makefile
    Hi3861 OpenHarmony嵌入式应用入门--点灯
    Fluorescein-PEG-CLS,胆固醇-聚乙二醇-荧光素用于缩短包封周期
    【甄选靶场】Vulnhub百个项目渗透——项目十八：pwnlab_init（LFI本地文件包含，PHP伪协议，文件上传绕过，逆向分析）
    网络安全（黑客）—高效自学
    Eureka简介与使用浅析
  • 原文地址：https://blog.csdn.net/weixin_49015558/article/details/133684732