download as image or get a link

[Deleted user]

It's working great, really thank you!
I've made a script, it allows to generate a profile card. But on mobile, users can't save it because it isn't a real image file. How can I get an output as PNG or JPG to save it?

[Gustavo Araújo]

Use toDataURL.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

[Christoph Burgmer]

As juhguu mentioned, but please be aware of https://github.com/cburgmer/rasterizeHTML.js/wiki/Limitations#safari: "Webkit is not able to read back from the canvas".

[Deleted user]

thank you. I used something like this:

function dlCanvas() {
  var dt = canvas.toDataURL('image/png');
  /* Change MIME type to trick the browser to downlaod the file instead of displaying it */
  dt = dt.replace(/^data:image\/[^;]*/, 'data:application/octet-stream');

  /* In addition to <a>'s "download" attribute, you can define HTTP-style headers */
  dt = dt.replace(/^data:application\/octet-stream/, 'data:application/octet-stream;headers=Content-Disposition%3A%20attachment%3B%20filename=Canvas.png');

  this.href = dt;
};
document.getElementById("dl").addEventListener('click', dlCanvas, false);

then, create an:
<a id="dl" download="Canvas.png" href="#" target="_blank" rel="nofollow">Download Canvas</a>

it's working good.

[Raphaël]

@arterhacker It seems that your problem was solved. If it's the case, can you close the issue please?