2

I am making an app that combines 2 images on a canvas, & lets you share it. It works fine in a browser when run from a local webserver, but not when run in cordova. All foreign images come from dataURIs of SVGs in a JSON file from a remote webserver.

flow is like this:

  1. download JSON array of dataURIs of SVGs from remote server
  2. get image from camera (or shim that returns dataURI of test image, if cordova camera is not available)
  3. splat photo to canvas
  4. choose SVG image from list (comes from JSON of dataURIs)
  5. move SVG around
  6. Save complete image with canvas.toDataURL() to remote server

All steps work on local test webserver, and I have verified that both images are dataURIs (from camera, and from remote JSON SVG.)

I am using image.crossOrigin = ''; on both the SVG & the camera image before they are put on canvas, even though I don't think I need to.

I get this error in adb logcat when I attempt to load dataURI of final canvas to display to user, before sending, in step 6:

Error: SECURITY_ERR: DOM Exception 18 at file:///android_asset/www/lib/ionic/js/ionic.bundle.min.js:114

This error is supposed to be when you try to access canvas image composed of foreign-origin images not dataURIs, right? Am I dong something wrong here?

I am using Cordova 3.4.1-0.1.0 on Android 4.4.2

Update

Also, strangely, it works fine, if I comment out the part where it should draw the image with a SVG dataURI. I double-checked it, and it is indeed a data:image/svg+xml;base64,... URI.

konsumer
  • 3,411
  • 1
  • 30
  • 31

1 Answers1

1

I found this which suggests that SVG dataURIs taint the canvas. ugh.

So, basically, I need to not use dataURIs for the SVGs (like inline SVGs appended to DOM) or I need to use a raster format. In this case, I will sadly use PNGs.

Community
  • 1
  • 1
konsumer
  • 3,411
  • 1
  • 30
  • 31