显示base64 img给出该字符串包含无效字符

时间:2018-06-19 07:49:38

标签: javascript ionic3 cordova-plugins

我正在尝试显示我从相机插件(iOS,离子3)获得的base64图像。我需要base64-Format,因为我需要它来进行REST-API-Call。 启动takePicture-Function后我得到了

The String contains invalid characters

我在工具中解码了 imageData -String并且它有效。

JS

image: string = '';
base64Image: string = '';
base64Data: string[] = [];
_images: boolean = false;
...

takePicture() {

        const options: CameraOptions = {
          quality: 100,
          destinationType: this.camera.DestinationType.DATA_URL,
          encodingType: this.camera.EncodingType.JPEG,
          mediaType: this.camera.MediaType.PICTURE,
          allowEdit: true,
          saveToPhotoAlbum: true,
          correctOrientation: true
        }

        this.camera.getPicture(options)
        .then((imageData) => {
         let base64Image = 'data:image/jpeg;base64,' + imageData;
         console.log(base64Image);
         this.base64Data.push(imageData);
         this.image = base64Image;
         this._images = true;
        }, (err) => {
         // Handle error
         console.log(`ERR -> ${JSON.stringify(err)}`);
        });
}

HTML

<div *ngIf="_images">
    <img [src]="image | safePipe: 'html'" #imageResult />
</div>

安全-HTML的管道

...
public transform(value: string, type: string = 'html'): SafeHtml | SafeStyle | SafeScript | SafeUrl | SafeResourceUrl {
    switch (type) {
        case 'html': return this._sanitizer.bypassSecurityTrustHtml(value);
        case 'style': return this._sanitizer.bypassSecurityTrustStyle(value);
        case 'script': return this._sanitizer.bypassSecurityTrustScript(value);
        case 'url': return this._sanitizer.bypassSecurityTrustUrl(value);
        case 'resourceUrl': return this._sanitizer.bypassSecurityTrustResourceUrl(value);
        default: throw new Error(`Invalid safe type specified: ${type}`);
    }
}

0 个答案:

没有答案