上传图片压缩

原创已于 2023-12-25 17:21:51 修改 · 503 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2023-12-25 17:21:22 首次发布

文章介绍了如何将Canvas生成的base64数据转换为File或Blob格式，以便进行图片压缩，然后处理上传至服务器。方法包括`dataURLtoFile`和`dataURLtoBlob`，以及一个名为`compressImg`的公共方法，用于压缩图片并根据不同格式返回文件。

// canvas生成的格式为base64，需要进行转化, base64->file
const dataURLtoFile = (dataurl,fileName)=> {
  let arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],

      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], fileName, {type:mime})
}

// canvas生成的格式为base64，需要进行转化, base64->blob
const dataURLtoBlob = (dataurl)=> {
  const arr = dataurl.split(","),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]);
  let n = bstr.length;
  const u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], { type: mime });
}

/**

* @压缩公共方法

* @params file

* @return 压缩后的文件，支持两种，file和 blob

const compressImg = (file,fileName)=> {
  return new Promise(resolve => {
    const reader = new FileReader();
    // readAsDataURL 方法会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend (en-US) 事件，
    // 同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
    reader.readAsDataURL(file);
    reader.onload = () => {
      const img = new Image();
      img.src = reader.result;
      img.onload = () => {
        // 图片的宽高
        const w = img.width;
        const h = img.height;
        const canvas = document.createElement("canvas");
        // canvas对图片进行裁剪，这里设置为图片的原始尺寸
        canvas.width = w;
        canvas.height = h;
        const ctx = canvas.getContext("2d");
        // canvas中，png转jpg会变黑底，所以先给canvas铺一张白底
        ctx.fillStyle = "#fff";
        // fillRect()方法绘制一个填充了内容的矩形，这个矩形的开始点（左上点）在
        // (x, y) ，它的宽度和高度分别由width 和 height 确定，填充样式由当前的fillStyle 决定。
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        // 绘制图像
        ctx.drawImage(img, 0, 0, w, h);

        // canvas转图片达到图片压缩效果
        // 返回一个包含图片展示的 data URI base64 在指定图片格式为 image/jpeg 或 image/webp的情况下，
        // 可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
        const dataUrl = canvas.toDataURL("image/jpeg", 0.8);

        // base64格式文件转成Blob文件格式
        let blobFile = dataURLtoBlob(dataUrl);
        console.log("压缩后的图片：Blob文件----------");
        console.log(blobFile);
        // base64格式文件转成file文件格式
        // let fileName = this.sourceFile.name
        resolve(dataURLtoFile(dataUrl,fileName));
        console.log("压缩后的图片：file文件----------");
      };
    };
  })
}

const uploadAction= async (option)=>{
  const file = await compressImg(option.file,option.file.name)
  let formData = new FormData()
  formData.append('file',file)
  baseService.post('上传路径',formData).then(res=>{
    if (res.code !== 0) {
      return ElMessage.error(res.msg);
    }
    emit("update:modelValue", res.data.src);
    ElMessage.success({
      message: "上传成功"
    });
  }).catch(()=>{
    ElMessage.error({
      message: "上传失败"
    });
  })
}