CORS enabled image

Jun 02, 2016

We have some issue about CORS enabled image.
We have add the Access-Control-Allow-Origin header in CDN server, but the course still can not play correctly.

This is the article about CORS enabled image.

According to the article, the JavaScript image object need to set crossOrigin = "Anonymous";


The error happens in player_compiled.js:1897.
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Callstack is
VectorShape.isPointActive @ player_compiled.js:1897
ItemGroup.isPointActive @ player_compiled.js:826
(anonymous function) @ player_compiled.js:1746
Element.deepEachReverse @ player_compiled.js:312
(anonymous function) @ player_compiled.js:1746
i.event.dispatch @ player_compiled.js:69
g.handle.h @ player_compiled.js:61

5 Replies
Ashley Terwilliger-Pollard

Hi Guanming,

I'm not familiar with a CORS enabled image, but the Javascript element is not something we're able to offer support for. You may want to review the information here in terms of Javascript best practices and also look at this article which could assist you with testing the published output in terms of uploading to an LMS to help narrow down where the issue is. 

Hope that helps and hopefully someone else in the community is able to offer additional information! 

Ajeet Uppal

Hello,

We are also running into this issue so wanted to follow up if there was a resolution to this issue. The scenario is, LMS is running on domainA.xyz.com, and scorm requests are served from that domain. Any content (that is referenced from the scorm html) request is redirected to cloudfront by the lms, so images are loaded from domainA.cloudfront.net

On some interaction in the course content (in html5 mode), browser doesn't allow user to click on some areas (that are images loaded from cloudfront) due to "The canvas has been tainted by cross-origin data." error. 

Any suggestion on how to solve this? 

Suvidha Kadulkar

Hello,

I am facing the same issue above mentioned. I have created course to view in mobile. Applied javascript code to show popup when the course is launched in portrait mode in device asking to view the course on landscape mode.  In my course there are videos. Initially I set it to play automatically. Now I have added Cue points and applied trigger so that video can play when time reaches cue points. Mostly I found the above issue when checking for device. Kindly can you please guide.

This discussion is closed. You can start a new discussion or contact Articulate Support.