base64串格式的图片压缩，base64与二进制流type[]互转

最新推荐文章于 2025-06-04 15:49:23 发布

原创

最新推荐文章于 2025-06-04 15:49:23 发布 · 2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#base64 #二进制流 #type[] #图片压缩

历史背景：

最近项目与硬件设备进行联调，硬件服务返回的指纹图片是一个base64串，前端页面要做图片展示，同时后端要保存，因为太大，有160kb左右，一般情况下，logo头像上传，不超过10kb的才有base64可以，这里前端需要对图片进行压缩，以为我们后端也没有longText类型接收，而是type[]格式接受参数。

这里我们的文件格式是图片哈！

private mine = 'data:image/jpeg;base64,';

解决方案：

1.通过canvas绘图API：
HTMLCanvasElement.drawImage()
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)；
示例对照
对图像进行压缩，剪裁，缩放等操作，具体细节查看API文档

HTMLCanvasElement.toDataURL()
官网文档示例
再次拿到base64串

var canvas = document.getElementById('canvas');
var dataURL = canvas.toDataURL();
console.log(dataURL);
// "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNby
// blAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC"

图片压缩方法

/**
   * 压缩base64串
   * @param base64String 图片字符串,注意必须是带格式的base64
   * @param maxLength 最大高度或宽度
   * @param quality 质量 0-1之间
   */
  reduceBase64 (base64String, maxLength, quality) {
   
   
    const getMimeType = (base64: string): string => {
   
   
      const arr = base64.split(',');
      const