convert html to image – Convert HTML to JPG / URL to JPG

Convert HTML to Image in jQuery / JavaScript [Div or Table to jpg/ png]. Convert your file from Hypertext Markup Language with a client-side image map to Joint Photographic Experts Group JFIF format. here you can simply way to Render HTML to an image.

convert html to image

jQuery / JavaScript HTML to Image Converter: Convert HTML to JPG. HTML2Canvas exists to render HTML onto canvas.

Use an API

  • Grabzit
  • ApiFlash (based on chrome)
  • HTML/CSS to Image API
  • EvoPDF (has an option for html)
  • imgkit
  • python-webkit2png
  • wkhtmltoimage
  • dom-to-image

Download and import HTML2Canvas files.

File name : https://html2canvas.hertzen.com/

<script src="Scripts/jquer_latest_2.11_.min.js" type="text/javascript"></script>
<script src="Scripts/html2canvas.js" type="text/javascript"></script> 

Add HTML markup

HTML MARKUP:
HTML element for which we create image

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;
        padding-left: 25px; padding-top: 10px;">
        <strong>Codepedia.info</strong><hr />
        <h2 style="color: #3e4b51;">
            Online Free Download Source code with demo
        </h2>
        <p style="color: #3e4b51;">
            <b>Pakainfo.com</b>website focuses on all web language and framework tutorial PHP, Laravel, Codeigniter, Nodejs, API, MySQL, AJAX, jQuery, JavaScript, Demo.
</p>
        <p style="color: #3e4b51;">
            <b>w3diy</b> Phppot helps build websites using PHP, specializes in building eCommerce shopping cart and provides PHP freelancer for hire.
        </p>
    </div>
    <input id="btn-Preview-Image" type="button" value="Preview" />
    <a id="btn-Convert-ahrefTool" href="#">Free Download</a>
    <input type="button" value="Preview & Convert" id="btnConvert" >
    <br />
    <h3>Preview :</h3>
    <div id="previewImage">
    </div>

JavaScript Code

convert HTML to Image [png]

 document.getElementById("btn_convert1").addEventListener("click", function() {
	html2canvas(document.getElementById("html-content-holder")).then(function (canvas) {			

	var ahrefTool = document.createElement("a");
			document.body.appendChild(ahrefTool);
			document.getElementById("previewImg").appendChild(canvas);
			ahrefTool.download = "filename.jpg";
			ahrefTool.href = canvas.toDataURL();
			ahrefTool.target = '_blank';
			ahrefTool.click();
		});
 });

Instead of 2 buttons we use a single button to preview and download the converted image.

 $("#btnConvert").on('click', function () {
                html2canvas(document.getElementById("html-content-holder")).then(function (canvas) {                   
                   var ahrefTool = document.createElement("a");
                    document.body.appendChild(ahrefTool);
                    document.getElementById("previewImg").appendChild(canvas);
                    ahrefTool.download = "filename.jpg";
                    ahrefTool.href = canvas.toDataURL();
                    ahrefTool.target = '_blank';
                    ahrefTool.click();
                });
    });

Image content in HTML markup

$("#btn_convert").on('click', function () {
		html2canvas(document.getElementById("html-content-holder"),		{
			allowTaint: true,
			useCORS: true
		}).then(function (canvas) {
			var ahrefTool = document.createElement("a");
			document.body.appendChild(ahrefTool);
			document.getElementById("previewImg").appendChild(canvas);
			ahrefTool.download = "filename.jpg";
			ahrefTool.href = canvas.toDataURL();
			ahrefTool.target = '_blank';
			ahrefTool.click();
		});
});

Free Live Chat for Any Issue

Button click converts HTML to Canvas:

var element = $("#html-content-holder"); // global variable
var getCanvas; // global variable

    $("#btn-Preview-Image").on('click', function () {
         html2canvas(element, {
         onrendered: function (canvas) {
                $("#previewImage").append(canvas);
                getCanvas = canvas;
             }
         });
    });

jQuery: Download HTML to IMAGE / Screenshot of Div content

$("#btn-Convert-ahrefTool").on('click', function () {
    var imgageData = getCanvas.toDataURL("image/png");
    var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
    $("#btn-Convert-ahrefTool").attr("download", "your_pic_name.png").attr("href", newData);
});

Don’t Miss : How to convert PHP page to pdf using fpdf?

I hope you get an idea about convert html to image.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.

1/5 - (1 vote)