Search code examples
androidcordovacanvasionic-frameworktodataurl

canvas.toDataURL not working on Android >4 devices (but on Android 2)

I'm building an App with Cordova/Ionic. The user can manipulate his gallery-fotos, which are then displayed on the app.

The problem I face right now is, that after the manipulation, the images are not shown on Android >4 devices (Android 4, Android 5, Android 6, etc.). There's just a "image-not-found"-image visible. But everything works as expected on Android 2.x devices.

Are there any significant changes between these versions?

The manipulation is done with this plugin.

My code looks like the following (index.html)

<img src="{{!!image.img11 ? image.img11.src : 'img/layout/placeholder.png'}}" ng-cloak>

App.js

      navigator.camera.getPicture(onSuccess, onFail,
      {
        quality: 30,
        destinationType: Camera.DestinationType.FILE_URI,
        sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
        targetWidth: imagePickerWidth,
        targetHeight: imagePickerHeight,
        encodingType: Camera.EncodingType.PNG,
        allowEdit: false
      });

      function onSuccess(imageURI) {
        self.crop(resolve, reject, scope, imageURI, type, width, height, tabs);

        /* JR-CROP MANIPULATION */

        scope.image.img11 = new Image();
        scope.image.img11.src = canvas.toDataURL("image/png");
      }
Solution

  • Ok, it seems that on Android bigger than 5 (5,6,7) there is a need for an security-policy in the index.html header.

    Just add the following:

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

    This allows base64 encoded images to be displayed.