How to save the contents of a div as a image?
There are several of this same question (1, 2). One way of doing it is using canvas. Here's a working solution. Here you can see some working examples of using this library.
Do something like this:
A <div> with ID of #imageDIV, another one with ID #download and a hidden <div> with ID #previewImage.
Include the latest version of jquery, and jspdf.debug.js from the jspdf CDN
Then add this script:
var element = $("#imageDIV"); // global variablevar getCanvas; // global variable$('document').ready(function(){ html2canvas(element, { onrendered: function (canvas) { $("#previewImage").append(canvas); getCanvas = canvas; } });});$("#download").on('click', function () { var imgageData = getCanvas.toDataURL("image/png"); // Now browser starts downloading it instead of just showing it var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream"); $("#download").attr("download", "image.png").attr("href", newData);});The div will be saved as a PNG on clicking the #download