I need a way to download JCanvas to a Image please.

[kevinvarela]

I tried a million ways for download Canvas but i failed.

If you have any way to resolve this. I will lot of grateful.

Regards.

[caleb531]

@kevinvarela Can you please provide the code you are trying to use? I need more context about what you mean and what you are trying to do.

[kevinvarela]

@caleb531 I use JCanvas for do a image with text. But now, i want download this image generated with JCanvas to file png/jpeg.

HTML <canvas id="canvas"></canvas> <a id="download" href=""><button type="button" class="btn-success btn btn-block" onClick="downloadCanvas()">Download</button></a>

JS function downloadCanvas() { var download = document.getElementById("download"); var image = document.getElementById("canvas").toDataURL("image/png").replace("image/png", "image/octet-stream"); download.setAttribute("download", "IMAGEl-" + fileNameGenerator()); download.setAttribute("href", image); }

[caleb531]

@kevinvarela First, convert the data URL produced by getCanvasImage() to a Blob. See https://stackoverflow.com/questions/16245767/creating-a-blob-from-a-base64-string-in-javascript and pick your favorite solution for doing so.

Then, once you have the blob, you can use the following code to trigger a file download:

let a = document.createElement('a');
a.href = URL.createObjectURL(myBlobFromAbove, {type: 'image/png'});
a.download = 'myimage.png';
a.click();

Please let me know if you're able to get this working.

[kevinvarela]

Thank you very much.

And thank you for JCanvas.