0

I get base64 string from take picture by camera. After that I save it into externalRootDirectory, everything works fine when I use ionic cordova run android -l -c.

But when I use ionic cordova run android the image file was broken.

This is my code:

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); 
}
nphoanh
  • 134
  • 1
  • 7

1 Answers1

0

What you are experiencing is a problem with the Content Security Policy. When you load with live-reload it's like a web, but without it load like a direct file and then need some policy to load some contents.

Try adding this in index.html

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

Check this links for any other load resource problem:

Whitelists

Content-security-policy refused to load image

I make a test project and I can get the blob load into a img from a url with this way:

Make a new pipeline class

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

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

Then in your img:

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

Angular2 Base64 sanitizing unsafe URL value

Guillem Perez
  • 266
  • 2
  • 9
  • Thanks for your answer! I have tried like you said but nothing change. Can you check the photo to see if I'm doing right [https://i.imgur.com/OG6eLAN.png] – nphoanh Nov 14 '18 at 01:12
  • I test the load problems with a ionic4 versions and I think that my previous answer was more a ionic1 solution, for that I updated my answer – Guillem Perez Nov 14 '18 at 09:36
  • Sorry for my late replying and thanks for your help, but after I tried it nothing change too. And my problem is the image was broken in the device, I can not open it in the device – nphoanh Nov 27 '18 at 09:01
  • Could you test with other images? Test with a base64 image downloaded from the web and check if the problem is with the loaded image or how you get this image. It's more likely that you get some problems from permissions or incorrect loading, path, codification... – Guillem Perez Nov 27 '18 at 10:46