I have a portfolio on Cargo Collective .
I’ve been trying to implement a JS-driven dynamic header that uses canvas.
EXAMPLE HERE
I am drawing a PNG image on the canvas and capturing pixel information with getImageData().
Everything works fine when I test it locally, but once on Cargo I get the dreaded tainted canvas error:
Unable to get image data from canvas because the canvas has been tainted by cross-origin data.
Uncaught Error: SECURITY_ERR: DOM Exception 18
This stems from the fact that on the Cargo CMS images are hosted on their own servers on addresses such as: media.cargocollective.com/1/7/245266/headerimg/FlakeSixBlack.png
The only obvious solution I see to this is to buy some web space just to host this single image that I use programmatically. This sounds a bit stupid and partially defeats the purpose of relying on a third-party CMS.
Is there any other way to work around this?
If there isn’t, how would I go about managing the DNS A records for two differents hosts?
My home page address http://flakesix.com would have to point to the Cargo Collective servers, while the image would have to be retrieved from another server (GoDaddy for example, which is where I got the domain name from).
I’m a little lost.
Any help appreciated.
If you already know what your image is, why not try and embed a base 64 conversion of it within your script ?
Here is some documentation/tool coming to Data Urls :
http://dataurl.net/#about