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

您遇到的是内容安全策略的问题。当你使用实时重载加载时，它就像一个web，但如果没有它，它就像直接文件一样加载，然后需要一些策略来加载一些内容。

尝试将其添加到index.html 中

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

检查此链接是否存在任何其他加载资源问题：

白名单

内容安全策略拒绝加载图像

---

我做了一个测试项目，我可以通过以下方式从url将blob加载到img中：

制作一个新的管道类

@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值