js读取图片成blob

在JavaScript中，可以通过以下步骤将图片读取为Blob对象：

1. 创建一个Image对象，设置其src属性为图片的URL。
2. 在Image对象的onload事件中，创建一个canvas对象，并将图片画到canvas上。
3. 调用canvas对象的toBlob()方法，将canvas对象中的图像转换为Blob对象。

下面是一个示例代码：

function imageToBlob(imageUrl) {
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = function() {
      const canvas = document.createElement('canvas');
      canvas.width = this.width;
      canvas.height = this.height;
      const ctx = canvas.getContext('2d');
      ctx.drawImage(this, 0, 0);
      canvas.toBlob(blob => {
        resolve(blob);
      }, 'image/jpeg');
    };
    img.onerror = function() {
      reject(new Error('Failed to load image'));
    };
    img.src = imageUrl;
  });
}

这个函数接受一个图片的URL作为参数，返回一个Promise对象，该Promise对象在成功时会resolve一个Blob对象，失败时会reject一个Error对象。调用示例：

imageToBlob('https://example.com/image.png')
  .then(blob => {
    // 处理Blob对象
  })
  .catch(error => {
    console.error(error);
  });