1 Reply Latest reply on Sep 29, 2014 8:05 AM by Ken Finnigan

    Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    Dean Peterson Newbie

      I am trying to get the gallery code to work cross domain.  I created a new application: "itemrepository".  In its application config I include a gridfs drive called itemrepo-images.

       

      I do not want my client-side code running in the same server as LiveOak.  I use my own yeoman generator and I scaffold a basic angularjs application out with a script import to the remote LiveOak.js file.  I use Grunt connect to run locally on port 9000 during development.  I also create a client for the "itemrepository" application called "itemrepositoryclient" and use that clientid in the code for logging in.  All of that works fine.  However, when I try to use the gallery demo application's code taken from its app.js file to view and upload images I get the error:

      Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.    That occurs after two images are successfully transferred.  I have four stored.  I have set the appropriate WebOrigins.  Does LiveOak set the keycloak "enable-cors" property to allow this?  Do you have any thoughts what I might be doing wrong?

       

      Update:

      I see the problem. The toDataURL() function requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it.

       

      Can LiveOak manipulate the image in some way to allow something like this?  I notice the files that were uploaded directly from the LiveOak server can be retrieved and are able to use the toDataURL method.  It is only the files I upload remotely that cannot be retrieved again remotely if I use the toDataURL function.