如何将实时图像URL转换为Angular Blob?

时间:2019-04-05 08:25:47

标签: javascript angular

我正在用角度7工作,我的要求是我需要获取图像的WidthHeightSize (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/

1 个答案:

答案 0 :(得分: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";