Конвертировать Blob в URL изображения и использовать в изображении src для отображения изображения - PullRequest
Новая
       70

Конвертировать Blob в URL изображения и использовать в изображении src для отображения изображения

0 голосов
/ 25 июня 2018

Как преобразовать BLOB-объект в base64 / image?
Я получаю этот BLOB-объект с помощью вызова API и пытаюсь отобразить его в
изображении.Я пробовал с ответами на stackoverflow, но ничто не могло помочь, поэтому
Я только что попробовал это.

//Angular 5 code  
imageSrc;//global variable  
data = [{"image_blob":{"type":"img/jpg","data":[123,125]}}];//from api  
var blob1 = new Blob([new Uint8Array(data[0].image_blob.data)]);  
const imageUrl = URL.createObjectURL(blob1);  
console.log(imageUrl);//blob:http://localhost:8100/c489.etc  
this.imageSrc = imageUrl;  

<!-- html code -->  
<img [src]='imageSrc' alt="image">

Пропустили что-нибудь.Пожалуйста, предложите

Ответы [ 3 ]

0 голосов
/ 09 октября 2018

эта строка работает для меня правильно, я не проверил полностью, и не знаю о проблемах безопасности или каких-либо других вещах, но кажется правильным: 

this.ImageSource = window.URL.createObjectURL(blob);

и в формате HTML 

<img [src]="ImageSource" />

Обновление 1:

Имеется проблема с безопасностью, исключение браузера относительно небезопасного URL

Обновление 2

проблема решена, моя проблема была, дублировать информацию для Blob, так что просто удалил ненужный текст (я думаю, потому что я правильно настроил mime, эта информация уже была там)] 

var result = (<any>e.srcElement).result;
  //this.Content = this.sanitizer.bypassSecurityTrustUrl('data:image/' + this.File.FileType + ';base64,' + result);
  this.Content = this.sanitizer.bypassSecurityTrustUrl(result);
0 голосов
/ 16 мая 2019

При попытке загрузить изображение в виде большого двоичного объекта из ответа сервера я столкнулся с проблемой, что Angular2 (7) считает предоставленный URL-адрес небезопасным. При поиске решения широко предлагаемое решение - использовать DomSanitizer для обхода защиты.

См. Пример из @Amirreza здесь, но также и в других сообщениях StackOverflow предлагается то же решение.

На странице угловой документации для DomSanitizer пишут следующее:

bypassSecurityTrustUrl ()

ВНИМАНИЕ: вызов этого метода с ненадежными пользовательскими данными подвергает ваше приложение угрозам безопасности XSS!

Мне кажется, что это небезопасно, если только вы действительно не уверены, что источнику изображения можно доверять!
Вам следует учитывать, что даже если источник исходит от вашего собственного сервера, он мог быть загружен пользователем, и можно было бы воспользоваться таким решением, загрузив вредоносное изображение.

Лучше и безопаснее конвертировать BLOB-объект (изображение) в URL-адрес данных (строку base64) и установить его в качестве src для вашего элемента изображения.

URL-адреса данных обычно считаются безопасными (MDN) :

Кодирование данных в формате base64

Строки base64, как правило, безопасны по URL-адресу, поэтому их можно использовать для кодирования данных в URL-адресах данных.

Это решение также предлагается в блоге здесь и даже в другом ответе от @Powkachu, но в этом ответе ошибка заключается в том, что идентификатор протокола base64 добавляется дважды ( the FileReader::readAsDataURL уже возвращает это в результате ) и излишне передается в bypassSecurityTrustUrl из дезинфицирующего средства.

Правильное, безопасное и более простое решение будет выглядеть так: 

let mySrc;
const reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
   // result includes identifier 'data:image/png;base64,' plus the base64 data
   mySrc = reader.result;     
}

Где blob - это Blob, а mySrc - это dataUrl (строка base64), которая теперь может быть немедленно установлена ​​как image src.

Здесь скрипка в простом Javascript , чтобы продемонстрировать работу этого решения без Angular.

0 голосов
/ 25 июня 2018

Создать строку base64: 

var reader = new FileReader();
reader.readAsDataURL(blob); 
reader.onloadend = function() {
   base64data = reader.result;     
}

Получив его, сгенерируйте строку, которую вы поместите в изображение src с помощью Angular sanitizer. Пример: 

import { DomSanitizer } from '@angular/platform-browser';
constructor( ... private sanitizer : DomSanitizer ...){}

public myFunction() : void {
    let mySrc = this.sanitizer.bypassSecurityTrustUrl('data:image/png;base64,' + base64data);
}

Вы можете изменить тип 'data:image/png;base64,', как вам нужно.

И чтобы закончить, поместите это в свой образ: 

<img [src]="mySrc" />
...