fileReader-图片优化

Data URL转blob

Data URL 格式的图片数据，为了进一步减少传输的数据量，我们可以把它转换为 Blob 对象

function dataUrlToBlob(base64, mimeType) {
  const bytes = window.atob(base64.split(",")[1]);
  const ab = new ArrayBuffer(bytes.length);
  let ia = new Uint8Array(ab);
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob([ab], { type: mimeType });
}

如何操作位图像素数据

如果想要操作图片像素数据，我们可以利用 CanvasRenderingContext2D 提供的 getImageData来获取图片像素数据，其中 getImageData() 返回一个 ImageData 对象，用来描述 canvas 区域隐含的像素数据，这个区域通过矩形表示，起始点为（sx, sy）、宽为 sw、高为 sh。其中 getImageData方法的语法如下

ctx.getImageData(sx, sy, sw, sh);

参考：https://www.yuque.com/guojikun/learn/ue9mmt