Hi Friends, It’s been a long time, so today I’m writing an interesting topic about how to capture a DIV content and save it as an image using PHP.
And I didn’t stop simply capturing any div but also giving an option to add a text with a drag option and two backgrounds to select with the help of jQuery.
If you wish to see the demo first, please go ahead and click the demo button below:
And to capture the DIV content I’m using a special Javascript developed by Niklas von Hertzen.
You can find the script and examples here, https://html2canvas.hertzen.com/
Ok lets’ begin what are the scripts.
What you should know to understand the script?
1. You should have the intermediate knowledge of jQuery and PHP.
2. And you should have the habit of reading comments in the script. 😉
Two files, index.html and save_png.php
Explore index.html:
<!DOCTYPE html>
<html>
<head>
<title>Capture Webpage Screenshot</title>
<!-- include the jquery and jquery ui -->
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- this script helps us to capture any div -->
<script src="html2canvas.js"></script>
<style>
/* these are just styles added for this demo page */
#canvas{
width: 572px;
height: 400px;
background-image: url(bg_img/bg.jpg);
margin: 0 auto;
}
.movable_div{
color: white;
font-family: Verdana;
cursor: move;
position: absolute;
}
#design{
width: 510px;
margin: 0 auto;
background: purple;
border: 1px solid black;
color : white;
padding: 30px;
}
</style>
</head>
<body>
<h3 align="center">Theonlytutorials.com - See the tutorial here <a href="">Click Here</a></h3>
<div id="design">
<div id="controls">
Text: <input type="text" value="Agurchand" id="textbox" /> <input type="button" value="Capture" id="capture" /><br /><br />
Font Size: <input id="slider" type ="range" min ="12" max="50" value ="0"/><br /><br />
Select Background: <select id="background"><option value="bg.jpg">Background 1</option><option value="bg2.jpg">Background 2</option></select>
</div>
<br />
</div>
<div id="canvas">
<div class="movable_div">Agurchand</div>
</div>
<p align="center">Drag the text and place it wherever you want on the picture</p>
<script type="text/javascript">
$(function(){
//to make a div draggable
$('.movable_div').draggable(
{containment: "#canvas", scroll: false}
);
//to capture the entered text in the textbox
$('#textbox').keyup(function(){
var text = $(this).val();
$('.movable_div').text(text);
});
//to change the background once the user select
$('#background').change(function(){
var background = $(this).val();
$('#canvas').css('background', 'url(bg_img/'+background+')');
});
//font size handler here.
$('#slider').change(function(){
fontSize = $(this).val();
$('.movable_div').css('font-size', fontSize+'px');
});
//here is the hero, after the capture button is clicked
//he will take the screen shot of the div and save it as image.
$('#capture').click(function(){
//get the div content
div_content = document.querySelector("#canvas")
//make it as html5 canvas
html2canvas(div_content).then(function(canvas) {
//change the canvas to jpeg image
data = canvas.toDataURL('image/jpeg');
//then call a super hero php to save the image
save_img(data);
});
});
});
//to save the canvas image
function save_img(data){
//ajax method.
$.post('save_jpg.php', {data: data}, function(res){
//if the file saved properly, trigger a popup to the user.
if(res != ''){
yes = confirm('File saved in output folder, click ok to see it!');
if(yes){
location.href =document.URL+'output/'+res+'.jpg';
}
}
else{
alert('something wrong');
}
});
}
</script>
</body>
</html>
Read the comments in the script to understand the operations.
Explore save_jpg.php:
<?php
//just a random name for the image file
$random = rand(100, 1000);
//$_POST[data][1] has the base64 encrypted binary codes.
//convert the binary to image using file_put_contents
$savefile = @file_put_contents("output/$random.jpg", base64_decode(explode(",", $_POST['data'])[1]));
//if the file saved properly, print the file name
if($savefile){
echo $random;
}
?>
Download the code here and learn yourself by exploring it.
Hi Agurchand,
I am getting black images, using your code with my div, do you have a clue why? thanks in advance.
are you using background images?
thank
function save_img(data){
//ajax method.
$.post(‘save_jpg.php’, {data: data}, function(res){
//if the file saved properly, trigger a popup to the user.
if(res != ”){
yes = confirm(‘File saved in output folder, click ok to see it!’);
if(yes){
location.href =document.URL+’output/’+res+’.jpg’;
}
}
else{
alert(‘something wrong’);
}
});
}
in this function, After $.post(‘save_jpg.php’, {data: data}, function(res){ this line nothing is Coming? What is the Problem?
What about “Proxy must be used when rendering url” error?
I have used this code for generate image using 2-4 images.
When I used image on my server generate image perfect but when we are using other server image than not working can you tell me solution for this
like this
https://keshamrit.com/wp-content/uploads/2016/05/front-1.png
thank you
Not Capture Hindi Font
how cand i give it a specific width and height and resolution
You can read the documentation here. There are few options where you can specify height, width but no image resolution option. https://html2canvas.hertzen.com/documentation.html
Hello,
It is not working with Arabic عربي.
https://theonlytutorials.com/demo/div_to_image/output/169.jpg
Hi Agurchand,
Great article, i have also written similar article but instead of saving on server-side am saving at client local machine here’s the link https://codepedia.info/convert-html-to-image-in-jquery-div-or-table-to-jpg-png/
Hope your reader enjoy it.
Hi,
Everything works well on my local setup. On moving to remote, i have got an issue. My control doesn’t enter html2canvas(div_content).then(function(canvas) {}
Can you please help me know what the possible issue might be.
its work for image and text but when i try with iframe its not working.