jQuery and Canvas.toDataURL

Question

I'm working on a script, and a small part of that involves taking a canvas and converting it to a downloadable image. To do this, I do:

var thumb_jpeg = thumbnail.toDataURL("image/jpeg");
$("#" + options.dest).attr('src',thumb_jpeg);

...where thumbnail is a canvas tag and options.dest is the name of an img id.

This code works perfectly in Chrome, but when I try it in Firefox, Firebug throws up this error:

Security error" code: "1000
var thumb_jpeg = thumbnail.toDataURL("image/jpeg");

I would link to the whole script, but everything is hosted on my computer. Does anyone have any idea what this might mean?

Thanks! Jeff

Answer 1

I believe it may be because you have it hosted on your computer. Are you working directly from your local filesystem or are you working on a local server like MAMP or WAMP? I had this security code pop up on me before and it was alleviated when I moved my files from my hard drive on to a server.

Answer 2

I think the problem is that Flash is swallowing the click event or otherwise interfering with jQuery's solution for inconsistent models for event propagation. So I think the thing to do is to add a div that floats above the flash movie, but is a sibling. Something like this:

echo '<div id="top_banner_clickable">';
echo     '<div id="top_banner_wrapper">';
echo         '<object width="400" height="60">';
echo             '<param name="wmode" value="transparent">';
echo             '<embed wmode="transparent" src="'.$banners[$rand].'" ';
echo             'width="400" height="60" type="application/x-shockwave-flash"';
echo             'pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" />';
echo         '</object>';
echo         '<div id="clickableoverlay"></div>';
echo     '</div>';
echo '</div>';

Use CSS to make #clickableoverlay lie on top of the movie or use jQuery to clone the position and size of the movie. I don't think you should need to use z-index here if the clickable <div> appears after the <object>. Be careful to use wmode="transparent" (which you are!) or wmode="opaque". If you use wmode="window", the flash movie will always be on top of everything else, no matter what CSS you try to give it.

Answer 3

Andrew I think you responded to the wrong question by mistake...

Jeff