0

I see three places to indicate I want a crossOrigin image: using true for the third parameter (which the documentation says is deprecated) of createjs.LoadQueue, setting the loadItem.crossOrigin property (either assigning "Anonymous" or using LoadItem.set({ .. crossOrigin:true .. }), and the crossOrigin property (which always seems to be null) of an image returned by a LoadQueue getResult. I can find no combination of settings to avoid a tainted canvas. What is the trick?

Spock
  • 3
  • 3

1 Answers1

0

From my tests, CORS works fine.

Here is a quick sample using 0.6.2 from the CDN.

var queue = new createjs.LoadQueue(false);
queue.on("complete", handleComplete);
queue.loadFile({src:"http://playpen.createjs.com/CORS/awesome.jpg", crossOrigin:true, id:"image"});
function handleComplete(event) {
    var img = queue.getResult("image");
    console.log(img.crossOrigin); // anonymous
}

You can see it working in this demo, where the image is added to a bitmap on stage, and then a click listener added:

http://jsfiddle.net/od727g2q/

Here is a variation using the (deprecated, but still functional) argument on LoadQueue constructor: http://jsfiddle.net/od727g2q/1/

Just for sanity, here is a version using the latest NEXT in GitHub: http://jsfiddle.net/od727g2q/2/

Cheers.

Lanny
  • 11,244
  • 1
  • 22
  • 30
  • I tried an adaptation of your jsfiddle code on my desktop. (I added: in the header.) When I click on the image, I get this error (from Chrome developer tools): "An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images." – Spock Jan 18 '17 at 00:32
  • My comment (above) has been auto-edited to delete the "https://" I had in front of the path (in case that's important to know). And I put that script tag in the head (not the header). Also: Thank-you for your examples. – Spock Jan 18 '17 at 00:48
  • Can you post a link to an asset on your server? Maybe CORS isn't functioning as you expect. – Lanny Jan 18 '17 at 16:14
  • Not sure what you're looking for. I copied the jsfiddle code, so it is using the same asset (the awesome.jpg at playpen.createjs.com/CORS). – Spock Jan 18 '17 at 18:02
  • Oh, sorry I understand. It sounds like you are running locally on the file system (from file:///) -- This will not work regardless of your CORS setup. You can configure Chrome manually to work, but it is better practice to run on a local server. Consider MAMP/XAMPP, or something like http://www.linuxjournal.com/content/tech-tip-really-simple-http-server-python – Lanny Jan 18 '17 at 21:20
  • It is true that my HTML page is local, but "this" works fine when I load the image this way: i = document.createElement("IMG"); i.crossOrigin = "Anonymous"; i.src = "path-to-image-at-CORS-enabled-site";. I just can't get it to work with PreloadJS. – Spock Jan 18 '17 at 23:15
  • ah, looks like you stumbled upon a bug that slipped in at some point (apparently ages ago). There is a check to see if the asset is local before setting the crossdomain flag, and it passes the "src", but then checks item.src (which is null). So ALL images would be treated as local :( --- I plan to push a fix for this immediately. **UPDATE: Bug fixed already** – Lanny Jan 19 '17 at 23:21
  • Per my update above, this was already fixed, and is available in the NEXT build of PreloadJS. I did a quick test on the local filesystem, and it definitely works (whereas the 2015.11.26 version did not). Sorry for the hassle! – Lanny Jan 19 '17 at 23:26
  • 1
    I used the links to the NEXT build from jsfiddle and, yes, that works. Wow. What a relief. Thank-you for tracking down the error. The mystery is solved! – Spock Jan 22 '17 at 02:36