Canvas to PNG - Jquery convert canvas-to-png




Canvas to PNG - Jquery convert canvas-to-png

Canvas to PNG - Jquery convert canvas-to-png

Canvas to PNG - Jquery convert canvas to png

Canvas to PNG is a simple and very useful JavaScript library. this is not a Canvas to PNG library basically this is a html2canvas library and using this library we can convert Canvas to PNG using jQuery.

So before further we do let me tell you about Canvas to PNG how you can say html2canvas library.

Html2canvas JavaScript library allows you to take screenshots of web pages or parts of it directly on user browser.
The screenshot is based on that DOM and as such may not be 100% accurate to its real representation.

How do you do designers today we are going to design Canvas To Png. As you know the HTML markup is necessary for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

Save It As index.html :

<!DOCTYPE html>
<html lang="en" >
<meta charset="UTF-8">
<title>Canvas to PNG - Jquery convert canvas to png</title>
<link rel="stylesheet" href="" />
<script src=""></script>
<script src=""></script>
<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 600px;
padding-left: 25px; padding-top: 10px;">
<strong>Rauf Graphics</strong><hr/>
<h3 style="color: #3e4b51;">
Html to canvas, and canvas to proper image
<p style="color: #3e4b51;">
<b>Rauf Graphics</b> is a programming blog. Tutorials focused on Programming ASP.Net,
C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server, NodeJs,
Web Design, Software</p>
<p style="color: #3e4b51;">
<b>html2canvas</b> script allows you to take "screenshots" of webpages or parts
of it, directly on the users browser. The screenshot is based on the DOM and as
such may not be 100% accurate to the real representation.
<input id="btn-Preview-Image" type="button" class="button" value="Preview Image"/>
<a id="btn-Convert-Html2Image" class="button" href="#">Download Image as PNG</a>
<h3>Preview :</h3>
<div id="previewImage">

So this was our HTML markup in this HTML markup i have included 3 external files and that are:

  • shoelace.css CSS library to give appearance to our Canvas 2 PNG project.

  • jquery.min.js JavaScript library to execute or Run jQuery code.

  • html2canvas.min.js javascript library to convert HTML to Canvas.

  • shoelace.min.css CSS library is not required for this project I only used it to give appearance to our project you can remove this CSS library and use your own CSS code.

    So we have written HTML markup and customised it and now we will add some functionality in this project (Canvas To Png).

    To make this project (Canvas To Png) work properly for that we will use JavaScript.

    So here is a JavaScript for our project (Canvas To Png) and also save it with the filename as provided. Make a new directory called js and put this file to that directory


    Save It As index.js :

    var element = $("#html-content-holder"); // global variable
    var getCanvas; // global variable
        $("#btn-Preview-Image").on('click', function () {
             html2canvas(element, {
             onrendered: function (canvas) {
                    getCanvas = canvas;
     $("#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", "new_image.png").attr("href", newData);

    This is a JavaScript function which will convert HTML Canvas to PNG image.

    Consequence :

    So here we are, We have done and our project Canvas To Png is ready now you can save all the files as provided.
    Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.

    • Canvas To Png
      • js
        • index.js
      • index.html

    Download Project (Canvas To Png) File :

    Canvas To
    File Size 1.51 KB
    Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

    So guys this post is completed and if you want anything else right here you can also comment that topic I will try to make a post about it you can take a while for that.

    Thank you !

    Disqus Codes

    No comments


    Disqus Logo