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?
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.
I don't have any experience with HTML Canvas, so not whether there's anything we're doing in LiveOak that might be causing an issue for this to work.
Could you raise a JIRA for it?