Not working with cross origin images

[kl0tl]

Chrome throws:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

As a workaround, I tried to load the images as arraybuffers to build a base64 encoded (as described here). It works well, but now Safari throws:

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

The only solution I found is to remove the crossorigin attribute of the $img property of the scratchpad instance. I replaced this:

this.$img = $('<img src=""/>').attr('crossOrigin', '').css({position: 'absolute', width: '100%', height: '100%'});

with this:

this.$img = $('<img src=""/>').css({position: 'absolute', width: '100%', height: '100%'});

Is this attribute ever usefull ? It should at least be configurable.

[ShellyTan]

Thanks for your solution, @Kl0tl! I was having this exact same problem. Originally tried setting crossorigin to 'anonymous,' but it still didn't work. Only once I removed the crossorigin attribute did the images finally load.