Internet Explorer 11 fillStyle with pattern security error

StackOverflow https://stackoverflow.com/questions/22519935

Question

I got this script that works in Chrome, Safari and Firefox windwos/mac, but fails with a security error in IE 11.

http://jsfiddle.net/YkVgA/1/

Any idea how to get the image data from that canvas after I fill it with a texture from another domain?

That image has the cross origin enabled.

<body><canvas id="mycanvas"></canvas>


var ctx = document.getElementById('mycanvas').getContext('2d');

var img = new Image();
img.crossOrigin = 'anonymous';
img.src = 'http://www.gravatar.com/avatar/205e460b479e2e5b48aec07710c08d50';
img.onload = function () {
    var ptrn = ctx.createPattern(img, 'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, 150, 150);
    var inData = ctx.getImageData(0, 0, 150, 150)
}
Était-ce utile?

La solution

As fzzle pointed out in comments IE doesn't (yet) support cross-origin requests for images.

Possible solutions

In this particular case where the client cannot request CORS usage the options are somewhat limited so you have to either:

  • Create a copy of the image in the same origin as the page
  • Use a proxy page on server to request the image then feed it to the client in same origin
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top