vue+eleme upload 上传图片(含gif动图) canvas压缩,base64转blob对象

最新推荐文章于 2024-04-29 04:19:57 发布

前端同学

最新推荐文章于 2024-04-29 04:19:57 发布

阅读量1.1k

点赞数 2

分类专栏： eleme

本文链接：https://blog.csdn.net/weixin_44730897/article/details/117933975

版权

eleme 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这篇博客讨论了在项目中新增GIF动图上传需求所遇到的问题。原有的图片压缩方法通过canvas处理导致生成的.gif并非真正的动图。解决方案是针对gif文件直接获取blob对象，而非进行压缩。代码示例展示了如何处理gif上传，包括从base64转换为blob对象以及文件上传的实现。

摘要由CSDN通过智能技术生成

突然新增个需求，下、图片上传需要支持gif动图
以前的项目是通过canvas压缩的方式，但是通过这种方式，出现即使结果是.gif文件，但实际上，并不是动图
直接看下面代码

// 压缩图片
    compress(img) {
      const canvas = document.createElement("canvas");
      const ctx = canvas.getContext("2d");
      // let initSize = img.src.length;
      const width = img.width;
      const height = img.height;
      canvas.width = width;
      canvas.height = height;
      // 铺底色
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      ctx.drawImage(img, 0, 0, width, height);
      // 进行压缩
      const ndata = canvas.toDataURL("image/jpeg", 0.8);
      return ndata;
    },
   // base64转成bolb对象
    dataURItoBlob(base64Data) {
      let byteString;
      if (base64Data.split(",")[0].indexOf("base64") >= 0) {
        byteString = atob(base64Data.split(",")[1]);
      } else {
        byteString = unescape(base64Data.split(",")[1]);
      }
      const mimeString = base64Data.split(",")[0].split(":")[1].split(";")[0];
      const ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], { type: mimeString });
    },

    async upload(data) {
      // 自定义upload事件
      const img = new Image();
      img.src = this.file.url;
      img.onload = async () => {
        let blob;
        if(this.file.name.includes('gif')){
          await fetch(this.file.url) 
          .then((response) => response.blob()) //获取gif的blob对象
          .then((res) => {
            blob = res
          });
        }else{
          const _data = this.compress(img);
          blob = this.dataURItoBlob(_data);
        }
        const formData = new FormData();
        formData.append("file", blob, this.file.name); // 有的后台需要传文件名，不然会报错
        // formData.append('imageDesc', this.imageDesc) // 图片说明
        formData.append("filePath", this.filePath);

        //this.imgUpload(formData);
      };
    },