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
Don’t Miss : JPG to PDF Converter
Download and import HTML2Canvas files.
File name : https://html2canvas.hertzen.com/
Add HTML markup
HTML MARKUP:
HTML element for which we create image
Codepedia.infoFree Download
Online Free Download Source code with demo
Pakainfo.comwebsite focuses on all web language and framework tutorial PHP, Laravel, Codeigniter, Nodejs, API, MySQL, AJAX, jQuery, JavaScript, Demo.
w3diy Phppot helps build websites using PHP, specializes in building eCommerce shopping cart and provides PHP freelancer for hire.
Preview :
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(); }); });
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.