Convert (div) Html to Image using Javascript html2canvas with Example and Save using Ajax, PHP.

html.png
Sometimes you need to convert your entire div to the image. In this post, I am going to Convert the div or HTML to image with using jquery, javascript html2canvas with an example. and you can copy the code and apply to your website. This code is tested by my self as a developer having 5 years of experience in the same field. If you have the knowledge of jQuery, PHP coding then it will be more easy to convert HTML to image using javascript html2canvas and saving using Ajax, PHP. convert html to image javascript (html2canvas example) Here i am going to use https://html2canvas.hertzen.com/ 1.For example i have HTML like below:

Developergang.com

Welcome to Developergang.com Developer gang
image
2.Now you have to include jquery and html2canvas.js.


You can also download html2canvas.js. 3.Now add below script to convert your entire div to image.

4.save_image.php
$imagedata = base64_decode($_POST['imgdata']);
$filename = md5(uniqid(rand(), true));
//path where you want to upload image
$file = $_SERVER['DOCUMENT_ROOT'] . '/uploads/'.$filename.'.png';
$imageurl  = 'http://example.com/uploads/'.$filename.'.png';
file_put_contents($file,$imagedata);
echo $imageurl;

Full Code



Convert Div to image





Developergang.com

Welcome to Developergang.com Developer gang
image

save_image.php

$imagedata = base64_decode($_POST['imgdata']);
$filename = md5(uniqid(rand(), true));
//path where you want to upload image
$file = $_SERVER['DOCUMENT_ROOT'] . '/uploads/'.$filename.'.png';
$imageurl  = 'http://example.com/uploads/'.$filename.'.png';
file_put_contents($file,$imagedata);
echo $imageurl;
Hope that helps to understand html2canvas and Convert html to image javascript. If you still have queries, we will happy to help. Do comment below. Also if you want to Submit your post with the answer (Solution) or Submit Blog Post. You can visit submit blog post page.