Calling canvas.toDataURL in background.html causes SECURITY_ERR: DOM Exception 18

[AlexVN]

Hello,

I'm trying to create a thumbnail of the file received from website in
the extension's background page as follows:
function thumbnail(src, callback)
var img = new Image();
img.onload = function () {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, img.width, img.height);
callback(canvas.toDataURL('image/png'));
}
img.src = src;
}

and toDataURL throws the exception: SECURITY_ERR: DOM Exception 18

Commenting ctx.drawImage(...) removes the error. It seems that
drawImage marks canvas as unsafe and prevents it from displaying the
content. I just want to create a thumbnail of the image and pass it in
JSON between background page and page action popup. Anything I can do
with it?

Thanks,
Alex

[Brett Slatkin]

I'm seeing this too. I think it's this bug:

http://code.google.com/p/chromium/issues/detail?id=21847

Not sure how to work around it. Anyone have any ideas?

---------- Forwarded message ----------
From: AlexVN <alex.netkac...@gmail.com>
Date: Apr 14, 5:13 pm
Subject: Calling canvas.toDataURL in background.html causes
SECURITY_ERR: DOM Exception 18
To: Chromium-extensions

Hello,

I'm trying to create a thumbnail of the file received from website in
the extension's background page as follows:
function thumbnail(src, callback)
  var img = new Image();
  img.onload = function () {

    varcanvas= document.createElement('canvas');
    var ctx =canvas.getContext('2d');

    ctx.drawImage(img, 0, 0, img.width, img.height);
    callback(canvas.toDataURL('image/png'));
  }
  img.src = src;

}

and toDataURL throws the exception: SECURITY_ERR: DOM Exception 18

Commenting ctx.drawImage(...) removes the error. It seems that

drawImage markscanvasas unsafe and prevents it from displaying the

[Brett Slatkin]

Ahh looks like the solution is to change your manifest.json to allow
cross-domain fetches:

"permissions": [
"http://*/*",
"https://*/*",
...
]

And then you can get access to the image data through canvas.