getimagedata issue

[Isaac Zepeda]

Hi,

I was trying Aviary Web API, everything was working correctly in my localhost, then I deployed to the site and when the aviary popup is loaded I have the following 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

I googled a lot and could find anything that solves this, any suggestions? Or maybe I'm doing something wrong, thanks in advance. The code I'm using is:

<script type="text/javascript" src="http://feather.aviary.com/js/feather.js"></script> <!-- Instantiate Feather --> <script type="text/javascript"> var featherEditor = new Aviary.Feather({ apiKey: 'e22fb5fb3', apiVersion: 2, tools: 'all', appendTo: '', onSave: function(imageID, newURL) { //code } }); function launchEditor(id, src) { var conf = { image: id}; if(src != '') conf.url = src; featherEditor.launch(conf); return false; } </script>

Other thing If I set a valid url un the conf.url and launch the editor a loading gif image appears on the image and never quits and I can't use aviary :S

Thanks

[Isaac]

Hi Chris,

You sent this email direct, it wasn't be posted in the forum.

what if my image src is a relative path such as /media/images/image.jpg

<img src="/media/images/image.jpg" />

Should I change ir to <img src="http://domain.com/media/images/image.jpg" /> ??

Regards and thanks for answering

On Thu, Mar 29, 2012 at 7:39 AM, Chris Bosco <ch...@worth1000.com> wrote:

Hi Isaac,

There is a security restriction when using image data in HTML canvas. The image used has to be on the same origin as your hosting page.  When you only provide the image parameter its src must be on the same origin if you want to use it in the browser directly. If you cannot guarantee the image will be on the same origin, use the url parameter:

http://www.aviary.com/web-documentation#constructor-config-url

Note that the image must be publicly available in that case as our server must download it and send you raw image data. 

Without seeing your entire integration I think you are calling that launchEditor function without a src argument. 

Best,

Chris

Sent from my iPad

--

Isaac Zepeda

[Chris Bosco]

Hi Isaac,

Thanks for the reminder; I will move my response to the thread. 

Relative is just fine for the image param but will not work for the url param. That said, if you are relative you should be able to leave url out entirely

Sent from my iPad