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

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.info

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.

Free Download

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.

Leave a Comment