download as image or get a link

ghost commented 7 years ago

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?

juhguu commented 7 years ago

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

cburgmer commented 7 years ago

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".

ghost commented 7 years ago

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="#">Download Canvas</a>

it's working good.

raphaelparent commented 7 years ago

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

cburgmer / rasterizeHTML.js

download as image or get a link #179