如何使用javascript从图像URL获取Blob数据

我有一个解决方案，但它花费了太多的时间。这是我的解决办法

//------------ Image url to base64 -------------//

    function convertImgToBase64(url, callback, outputFormat){
        var img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'), dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        callback(dataURL);
        canvas = null; 
     };
       img.src = url;
    }

   //------------ convert base64 into Blob -------------//
   function dataURItoBlobImg(dataURI) {
     var byteString;
     if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
     else
        byteString = unescape(dataURI.split(',')[1]);
     var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
     var ia = new Uint8Array(byteString.length);
     for (var i = 0; i < byteString.length; i++) {
         ia[i] = byteString.charCodeAt(i);
     }
     return new Blob([ia], {type:mimeString});
    }

/-----------指向base64的图像url-------------//
函数convertImgToBase64（url、回调、outputFormat）{
var img=新图像（）；
img.crossOrigin='匿名'；
img.onload=函数（）{
var canvas=document.createElement（'canvas'），
ctx=canvas.getContext（'2d'），dataURL；
canvas.height=this.height；
canvas.width=this.width；
ctx.drawImage（this，0，0）；
dataURL=canvas.toDataURL（outputFormat）；
回调（dataURL）；
canvas=null；
};
img.src=url；
}
//------------将base64转换为Blob-------------//
函数dataURItoBlobImg（dataURI）{
var-byteString；
if（dataURI.split（'，'）[0].indexOf（'base64'）>=0）
byteString=atob（dataURI.split（'，）[1]）；
其他的
byteString=unescape（dataURI.split（'，）[1]）；
var mimeString=dataURI.split（'，'）[0]。split（'：'）[1]。split（'；'）[0]；
var ia=新的Uint8Array（byteString.length）；
for（var i=0；i

现在的事情是，首先我必须将图像转换成base64，然后我可以转换成Blob，有没有任何方法可以直接从图像URL转换成Blob

谢谢。

您尝试过：

HTMLCanvasElement.toBlob()

htmlcanvaseElement.toBlob（）

方法创建一个Blob对象，表示画布中包含的图像；该文件可以缓存在磁盘上，也可以由用户代理自行决定存储在内存中。如果未指定类型，则图像类型为image/png。创建的图像的分辨率为96dpi。 第三个参数用于image/jpeg图像，以指定输出的质量

示例来自

var canvas = document.getElementById("canvas");

canvas.toBlob(function(blob) {
  var newImg = document.createElement("img"),
      url = URL.createObjectURL(blob);

  newImg.onload = function() {
    // no longer need to read the blob so it's revoked
    URL.revokeObjectURL(url);
  };

  newImg.src = url;
  document.body.appendChild(newImg);
});