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

您遇到的是内容安全策略问题。当您使用实时重新加载进行加载时，它就像一个网络，但是如果不进行加载，则就像直接文件一样，然后需要一些策略来加载一些内容。

尝试将其添加到index.html

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

检查此链接是否有其他负载资源问题：

Whitelists

Content-security-policy refused to load image

我制作了一个测试项目，可以通过以下方式将blob加载到url中的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 sanitizing unsafe URL value

在不运行livereload的情况下保存时，离子3图像损坏

1 个答案: