3

Well not exactly. If I just draw (ex lines,rect...) and try to export the canvas as an image. It works fine. If I however use the canvas.drawImage(...) function which places an image on the canvas. Then try to export it as an image, I get the following security error:

[16:05:05.326] uncaught exception: [Exception... "Security error"  code: "1000" nsresult: 
"0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"  location: 
"http://127.0.0.1:8020/Blackboard/Models/BlackboardCanvas.js Line: 82"]

I was assuming that the canvas.drawImage would take the raw pixel from the image and paste it onto the canvas, but I guess I was wrong. What can I do?

epascarello
  • 204,599
  • 20
  • 195
  • 236
dchhetri
  • 6,926
  • 4
  • 43
  • 56

2 Answers2

6

The behavior you describe is per the specification. Excerpted:

All canvas elements must start with their origin-clean set to true. The flag must be set to false if any of the following actions occur:

  • The element's 2D context's drawImage() method is called with an HTMLImageElement or an HTMLVideoElement whose origin is not the same as that of the Document object that owns the canvas element.

[...]

Whenever the toDataURL() method of a canvas element whose origin-clean flag is set to false is called, the method must throw a SecurityError exception.

The only way to circumvent this is to use a server-side technology to fetch the remote image for you and re-serve it from your same domain.

Phrogz
  • 296,393
  • 112
  • 651
  • 745
  • How about using some sort of external library to read the image's pixel and then put each pixel onto the canvas. Do you know of any such libraries? – dchhetri Nov 15 '11 at 18:47
  • @user814628 What do you mean by "external library"? Such as Flash? It sounds to me like you are trying to do something nefarious (bad for the user, possibly illegal). Why are you trying to load an image from another domain on the browser and then capture it? – Phrogz Nov 15 '11 at 20:46
  • I'm sorry, I did not mean to sound malevolent. I'm just doing a senior design project. By external library, I mean possibly, using external javascript library. Maybe get a image link from the user and read the pixels from the image and store it onto the canvas. Just seeing if this is a possibility. – dchhetri Nov 16 '11 at 00:57
  • @user814628 No, the only non-plugin web browser technology that exposes raw image pixels to JavaScript is the HTML5 canvas, and (per the URL I link above) you may not call `getImageData()` on a tainted canvas. – Phrogz Nov 16 '11 at 01:48
  • Hmm...then is it possible to just get the pixels in the current canvas, save it into a temporary one and then save the temporary one as an image? EDIT: Oh wait, I can't use getImageData as well huh...crap – dchhetri Nov 16 '11 at 19:32
0

Are you waiting for the image to fully load before calling canvas.drawImage?

var img = new Image();
img.onload = function(){
    canvas.drawImage(img,0,0);
    //do whatever else here
};
img.src = 'foo.jpg';
epascarello
  • 204,599
  • 20
  • 195
  • 236
  • 3
    Yes, as mentioned in the comments, I think the problem was the cross-domain image. How can I circumvent that problem? – dchhetri Nov 14 '11 at 21:32