Hi,
I successfully able to create image from html element following this html to image in jquery . their required two button. I want to achieve the same, direct convert and download image on single click. No need to preview.
button 1
$ ("# btn-Preview-Image"). on ('click', function () {
html2canvas (element, {
onrendered: function (canvas) {
$ ("# previewImage"). append (canvas);
getCanvas = canvas;
}
});
});
Button 2
$ ("# btn-Convert-Html2Image"). on ('click', function () {
var imgageData = getCanvas.toDataURL ("image / png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace (/ ^ data: image \ / png /, "data: application / octet-stream");
$ ("# btn-Convert-Html2Image"). attr ("download", "your_pic_name.png"). attr ("href", newData);
});
I successfully able to create image from html element following this html to image in jquery . their required two button. I want to achieve the same, direct convert and download image on single click. No need to preview.
button 1
$ ("# btn-Preview-Image"). on ('click', function () {
html2canvas (element, {
onrendered: function (canvas) {
$ ("# previewImage"). append (canvas);
getCanvas = canvas;
}
});
});
Button 2
$ ("# btn-Convert-Html2Image"). on ('click', function () {
var imgageData = getCanvas.toDataURL ("image / png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace (/ ^ data: image \ / png /, "data: application / octet-stream");
$ ("# btn-Convert-Html2Image"). attr ("download", "your_pic_name.png"). attr ("href", newData);
});