# jquery convert html to image



## isatindersinght (9. Jan 2021)

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);
});


----------

