canvas 导出图片的大小计算

原创
10/17 13:28
阅读数 172

 

 

最佳做法使用promise封装一下, 比toDataURL会占用更少的内存, 同时大小计算也更加精确

      const p = await new Promise((r) => {
        rawImage.canvas.toBlob(
          (data) => {
            console.log("data:", data, data.size);
            r({ size: data.size, url: URL.createObjectURL(data) });
          },
          s,
          q
        );
      });
      console.log(p);
      // outputImage.url = rawImage.canvas.toDataURL(s, q);
      outputImage.url = p.url;
      outputImage.outputSize = p.size;

 

toBlob

导出blob格式, 然后获取size

canvas.toBlob(
        (data) => {
          console.log("data:", data, data.size);
        },
        s,
        q
      );

 

toDataURL

      const head =
        type === "jpg" ? "data:image/jpeg;base64," : "data:image/png;base64,";
      const imgFileSize = ((outputImage.url.length - head.length) * 3) / 4;

      console.log("f:", outputImage.url, imgFileSize);

 

优化版


      const head =
        type === "jpg" ? "data:image/jpeg;base64," : "data:image/png;base64,";
      const urlLength = Math.floor(
        outputImage.url.replace(/=/gis, "").length - head.length
      );
      const imgFileSize = (urlLength * 3) / 4;
      console.log("f:", imgFileSize);

但是在计算过程中总是会和第一种差两个b

这是由于base64的编码特性导致的

 

Base64编码的思想是:采用64个基本的ASCII码字符对数据进行重新编码。

将需要编码的数据拆分成字节数组,以3个字节为一组,按顺序排列24位数据,再把这24位数据分成4组,即每组6位;
再在每组的的最高位前补两个0凑足一个字节,这样就把一个3字节为一组的数据重新编码成了4个字节;
当所要编码的数据的字节数不是3的整倍数,也就是说在分组时最后一组不够3个字节,这时在最后一组填充1到2个0字节,并在最后编码完成后在结尾添加1到2个=号。
 


 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部