How to Take Screenshot of Website from URL using Jquery

If you want to display image Preview of any website from url, You can simply use Jquery with Google PageSpeed Insights API to capture the realtime screen shot of the website. Like if your website displaying the number’s of url on page so it is good idea to display website image preview to user’s for better user experience, Here I’ll show you How to Take Screenshot of Website from URL using Jquery and you can use following script in any technology to capture screenshot of website.
url2img


How to Take Screenshot of Website from URL using Jquery

You can simply make call to following Google PageSpeed Insights url using javascript or PHP it’ll return data which you can parse and display website image preview.

https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + url + '&screenshot=true

Making ajax call and parsing json data to get image preview

$.ajax({
        	url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + url + '&screenshot=true',
        	context: this,
        	type: 'GET',
        	dataType: 'json',
        	timeout: 60000,
        	success: function(result) {
           		var imgData = result.screenshot.data.replace(/_/g, '/').replace(/-/g, '+');
            	$("img").attr('src', 'data:image/jpeg;base64,' + imgData);
            },
            error:function(e) {
            	$("#msg").html("Error to fetch image preview. Please enter full url (eg: http://www.iamrohit.in)");
            }
        });



Using above function i created simple input box in html where you need to enter full website address and it’ll call above given Google PageSpeed Insights url and return image preview of website.

 
<!--
Author: Rohit Kumar
Website: http://iamrohit.in
Date: 09-08-2017
AppName: url2img
 -->
<title>Simple, lightweight jQuery Program to get website screenshots</title>
<div style="text-align:center; width:80%; margin:0 auto;">
<h3>Simple, lightweight jQuery Program to get website screenshots</h3>
<b>Enter Full Website URL:</b><br/>
<input type="text" id="url" placeholder="http://www.iamrohit.in"> 
<br/>
<button id="url2img">SUBMIT</button>
<br/>
<span id="msg" style="color:red; font-size:18px;"></span> <br/>
<img src="">
<br/>
<br/>
<a href="http://iamrohit.in">Created By Rohit Kumar</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function() {
 
	$('#url2img').click(function(){
		$("#msg").html("Loading Image Preview Please Wait..");
		$("img").attr('src', "");
		var url = $("#url").val();
		  $.ajax({
        	url: 'https://www.googleapis.com/pagespeedonline/v1/runPagespeed?url=' + url + '&screenshot=true',
        	context: this,
        	type: 'GET',
        	dataType: 'json',
        	timeout: 60000,
        	success: function(result) {
           		var imgData = result.screenshot.data.replace(/_/g, '/').replace(/-/g, '+');
            	$("img").attr('src', 'data:image/jpeg;base64,' + imgData);
            	$("#msg").html('');
            },
            error:function(e) {
            	$("#msg").html("Error to fetch image preview. Please enter full url (eg: http://www.iamrohit.in)");
            }
        });
 
	});
 
});
 
</script>

See online Demo and Download Source Code.

DEMO | DOWNLOAD

Hope you liked this post to Take Screenshot of Website from URL using Jquery, For more awesome tutorial don’t forget to subscribe My Public Notebook.