Изображение Ionic 3 ломается при сохранении без запуска livereload

Question

Я получаю строку base64 от снимка камерой.После этого я сохраняю его в externalRootDirectory , все отлично работает, когда я использую ionic cordova run android -l -c.

Но когда я использую ionic cordova run android, файл изображения был поврежден.

Этомой код:

b64toBlob(b64Data, contentType, sliceSize) {
    var contentType = contentType || '';
    var sliceSize = sliceSize || 512;
    var byteCharacters = atob(b64Data.replace(/^data:image\/(png|jpeg|jpg);base64,/, ''));
    var byteArrays = [];
    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);
        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }
        var byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
    }
    return new Blob(byteArrays, {type: contentType});
}

savebase64AsFile(folderPath, fileName, base64, contentType){
    var DataBlob = this.b64toBlob(base64,contentType,512);
    this.file.writeFile(folderPath, fileName, DataBlob).catch(e => console.log('File didn\'t save: ' + e.message));       
}  

saveImage(){
     this.savebase64AsFile(folderPath, nameFile, base, this.image.type); 
}

Answer 1

Проблема в Политике безопасности контента.Когда вы загружаете с live-reload, это похоже на веб, но без него загружается как прямой файл, а затем требуется некоторая политика для загрузки некоторого содержимого.

Попробуйте добавить это в index.html

 <meta http-equiv="Content-Security-Policy" content="img-src: 'self' blob: ;"/>

Проверьте эту ссылку на наличие любых других проблем с ресурсами загрузки:

Белые списки

Политика безопасности содержимого отклонила загрузку образа

---

Я создаю тестовый проект и могу получить загрузку BLOB-объекта в img из URL следующим образом:

Создать новый класс конвейера

@Pipe({name: 'safeBlob'})
export class SafeBlob{
  constructor(private sanitizer:DomSanitizer){}

  transform(html) {
    return this.sanitizer.bypassSecurityTrustResourceUrl(html);
  }
}

Затем в вашемimg:

<img [src]="imageInBlobObjectUrl | safeBlob" alt="Blob image">

Angular2 Base64 санация небезопасного значения URL