download a canvas as an image in chrome extension

Question

This code work for me for downloading a canvas as an image in a custom html page:

var save = function() {
            var x= document.getElementById("output-canvas");
            var dt = x.toDataURL('image/png');
            this.href = dt;
};
downloadLink.addEventListener('click', save, false);

but it doesn't work (without any errors) for canvas in popup.html in a chrome plugin which i am developing.

Could anybody help me with a solution for downloading canvas items in a chrome plugin?

Edited:

This is my manifest file:

{
  ...
  "permissions": [ "contextMenus", "tabs", "http://*/*", "https://*/*", "activeTab", "storage"],
  ...
}

What's your manifest.json's "permissions" value? Do you put any image elements into the canvas? — wOxxOm, Feb 06 '17 at 19:48
@wOxxOm I've edit my question and add manifest info. Your next question answer is positive if i well understood. — Majid, Feb 06 '17 at 19:54
Hmm, permissions seem okay assuming the original image has a http:// or https:// URL. Just in case, did you look at the [popup's console](https://stackoverflow.com/a/38920982/)? (it's in the different place) — wOxxOm, Feb 06 '17 at 20:03
@wOxxOm yeah it has. yeah both console seems clear. Also I can't see 'Save image as ...' when right click on the canvas. which may have relation with this problem. Any idea? — Majid, Feb 06 '17 at 20:12
I guess your link element does not have a `download` attribute. — wOxxOm, Feb 06 '17 at 20:28
yes @wOxxOm. thanks for your help. it fixed my issue: downloadLink.download = "download"; — Majid, Feb 06 '17 at 20:30
@MajidMobini Did you publish that plugin? care to share the link? — Petruza, Sep 22 '21 at 12:29

score 2 · Accepted Answer · answered Feb 06 '17 at 20:44

Checklist:

The image URLs you draw on canvas should be allowed in manifest.json "permissions":
```
"permissions": [
  "activeTab",
  "https://i.imgur.com/*"
],
```

The link element should have a download attribute that contains a name of the file to save:

<a download="test.png" href="...">Save me</a>

or

var link = document.createElement('a');
link.download = 'test.png';
link.href = canvas.toDataURL('image/png');
document.body.appendChild(link);

download a canvas as an image in chrome extension

1 Answers1