项目记录：Canvas进行图片压缩

最新推荐文章于 2024-09-14 17:14:08 发布

爱吃鱼的小怪兽丶

最新推荐文章于 2024-09-14 17:14:08 发布

阅读量144

点赞数 1

文章标签：前端 javascript

本文链接：https://blog.csdn.net/L807301075/article/details/140358316

版权

需求描述：

点击小图片上传到七牛云，上传完毕后进行木材识别。

遇到问题：

原图将近20M，上传七牛云将近5-8秒，此处体验感较差。

解决办法：

将图片用Canvas进行压缩，将图片转成blob格式再上传到七牛云。

// Canvas图片压缩
export function compressByCanvas(img: any) {
  // console.log(img);
  let canvas = document.createElement('canvas');
  let ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
  let width = img.width;
  let height = img.height;
  canvas.width = width;
  canvas.height = height;
  ctx.fillStyle = '#ffffff'; // 铺底色
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, width, height);
  const quality = 0.1; // 进行最小压缩
  let ndata = canvas.toDataURL('image/jpeg', quality);
  // console.log('Compressed size: ' + img.src.length + ' => ' + ndata.length)
  return ndata;
}
// Canvas进行图片转换
export function dataURItoBlob(base64Data: any) {
  let byteString;
  if (base64Data.split(',')[0].indexOf('base64') >= 0) {
    byteString = atob(base64Data.split(',')[1]);
  } else {
    byteString = unescape(base64Data.split(',')[1]);
  }
  let mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
  let ia = new Uint8Array(byteString.length);
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i);
  }
  return new Blob([ia], { type: mimeString });
}