1. 技术文章
  2. Render blob image with Angular 4

Render blob image with Angular 4

由 自古美人都是妖i 提交于 2019-12-02 00:59:04

I'm not an image converting expert, but if it's a binary encoded image, try this : 

let img = document.createElement('img');
img.src = 'data:image/jpeg;base64,' + btoa('your binary data here');
// image now contains your picture

But I'm not sure this is correct data ... Anyways, try this, and let me know the result

If you have blob value, you can directly set the value in image tag in html..

Instead of this.imgStr = 'data:image/jpeg;base64,' + b64; use this.imgStr = b64; 

<img src="data:image/png;base64,{{imgStr}}" />

For dealing with blobs coming from a server try the following

// Get the blob via an angular service - with response type "blob" as "json"
getBlob() {
    return this.http_.get(`${this.url}/getBlob`, {responseType:"blob" as "json"});
  }

//In your component
imageUrl: string;
getBlobUrl(){
    this.blobService.getBlob().subscribe((data: Blob) => {
      this.createImageFromBlob(data);
    })
  }

  createImageFromBlob(image: Blob) {
    let reader = new FileReader();
    reader.addEventListener("load", () => {
      this.imageUrl= reader.result;
    }, false);
  if (image) {
      reader.readAsDataURL(image);
    }
  }

<!--HTML-->
<div>
 <img [src]="imageUrl">
</div>
标签
html
image
angular
binary-data
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!