0

I'm using the cordova-plugin-camera to get a picture from the album with navigator.camera.getPicture. to destinationType: destinationType.FILE_URI. This returns me a File_URI = file:///storage/emulated/0/Android/data/{app}/cache/IMG20200916194914.jpg?1600372401486 with the path that points to the cache folder where the image was saved. And I need to place that image as a div's background to be used as a wallpaper, with something like this:

$("#imageCustom").css("background-image", "url(" + imageURI + ")");

Problem is that it throws an error that says:

Not allowed to load local: resource:file:///storage/emulated/0/Android/data/{app}/cache/IMG20200916194914.jpg?1600372401486

Is there a way to get a relative path to that folder/file to be accessed by the html? Or may be moving the image to another folder and how I do that? (I copied it with resolveLocalFileSystemURL/requestFileSystem/copyTo/LocalFileSystem.PERSISTENT but only thing it does is copying it to the files folder where I have the same problem.

Thanks in advance.

Jorge Lizaso
  • 199
  • 1
  • 3
  • 15
  • 1
    This doesn't answer your question, so it's not an answer. Why not just upload the file to an image server and then get the URL and use that instead? If you don't want to upload the file, you can convert the image to base64 and use that instead of a URI or URL. – JM-AGMS Sep 17 '20 at 22:16
  • Thank for the response JM. I need to access the image as a Wallpaper even without connection to internet. Indeed I need to be able to pick the wallpaper between some pre-saved images, an image selected from the gallery, and some images downloaded from a server thru a webapi. My other option is to convert everything to base64, but I've some concerns about memory, plus if I can access the files directly it will simplify the code. – Jorge Lizaso Sep 17 '20 at 22:23
  • 1
    [This may help, good luck!](https://stackoverflow.com/q/56557534/6702203) – JM-AGMS Sep 17 '20 at 22:30
  • Indeed it helped! Thanks a lot! – Jorge Lizaso Sep 18 '20 at 01:33

1 Answers1

1

Thanks to JM-AGMS

As posted in cordova load image file from device storage used the cdvfile protocol included in cordova-plugin-file.

1.Added cdvfile: scheme to Content-Security-Policy meta tag of the index page, e.g.:

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">

2.Added <access origin="cdvfile://*" /> to config.xml.

3.And used to convert the path to the images:

resolveLocalFileSystemURL(imageURI, function(entry) {
    console.log('cdvfile URI: ' + entry.toInternalURL());

    $("#imageCustom").css("background-image", "url(" + entry.toInternalURL() + ")");
    $("#imageCustom").css("display", "block");
});

resolveLocalFileSystemURL(imageURI);
Jorge Lizaso
  • 199
  • 1
  • 3
  • 15