如何将实时图像 url 转换为角度的 blob？ [复制]

Posted 2023-03-15

【中文标题】如何将实时图像 url 转换为角度的 blob？ [复制]

【英文标题】：How to convert live image url into blob in angular? [duplicate]

【发布时间】：2019-08-27 02:40:50

【问题描述】：

我在 Angular 7 中工作，我的要求是我需要获取图像的 Width、Height 和 Size (in how much kb or mb)，并且我还试图将其转换为 blob。

我尝试了以下代码，但没有得到准确的输出：

var img_url = "http://snook.ca/files/mootools_83_snookca.png";


 var blob = new Blob([img_url]);

 let reader = new FileReader;

 reader.readAsDataURL(blob); // read file as data url
 reader.onload = () =>  // when file has loaded
    console.log(reader.result)
    var img:any = new Image();
    img.src = reader.result;

    img.onload = () => 

      this.uploaded_image_width = img.width; //to get image width
      this.uploaded_image_height = img.height;  //to get image height           

      this.uploaded_image_url = reader.result; //to get blob image
      console.log(reader.result)          
    ;          
   

当我正在安慰 blob 数据出错 (console.log(reader.result)) 并且内部 img.onload 函数未执行时。

我提到了这个小提琴来实现这一点： http://jsfiddle.net/guest271314/9mg5sf7o/

【问题讨论】：

您使用的是哪个版本的 Angular？

您必须设置图像的来源才能加载它。 onload 仅在图像具有 src 时调用。这里的问题是你在声明钩子之前已经设置了源：将线移到钩子下面，你应该没问题！

那是音频而不是图像，但实际上是一样的。

我正在使用 Angular 7 @TheParam

请看清楚我的问题，这不一样@Kaiido

【参考方案1】：

你可以这样试试。希望对你有帮助

var img = new Image();
img.onload = function()
    alert( this.width+' '+ this.height );
;
img.src = "http://lorempixel.com/output/city-q-c-250-250-1.jpg";

【讨论】：

如何获取该图像的 blob 值？？

首先您需要将图像转换为base64，然后再将base64转换为blob 这是将图像转换为blob的示例lin：gist.github.com/davoclavo/4424731