Convert Div to image using jQuery, PHP & HTML Canvas

div_to_image1

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:

demo

 

 

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.

download

14 thoughts on “Convert Div to image using jQuery, PHP & HTML Canvas

  1. 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?

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

Leave a Reply

Theme: Overlay by Kaira
Agurchand