ABOUT ME (/HOME/INDEX#ABOUT)

SKILLS (/HOME/INDEX#SKILLS)
POST (/HOME/INDEX#POST)
TOPIC
CONTACT (/HOME/INDEX#CONTACT)
;

CONVERT HTML TO IMAGE IN JQUERY

By Admin 16/08/2017 Jquery 70

This article explains how to convert div to an image in jquery. Yes, we

are going to generate an image from our HTML page on client-side using
jQuery.
Step to render HTML to Image [PNG/JGP] using jQuery
Download and import HTML2Canvas jquery files.
Add HTML markup.
jQuery Code: Button click convert HTML to Canvas.
jQuery Code: Download HTML to IMAGE.
Download and import HTML2Canvas files.
First, we need to download and import latest jquery library in our web page. You can import your server hosted jQuery file,
or you can also use from the Google-hosted site (recommended). For converting HTML to Image, we need to import one
more js library, and it is Download and import HTMLCanvas (../content/document/htmlcanvas.zip) download it and import
into the HTML head tag. Now we are done with downloading, so our final head tag looks like as shown below.

//*
<script src="Scripts/jquer_latest_2.11_.min.js" type="text/javascript"></script>
<script src="Scripts/html2canvas.js" type="text/javascript"></script>
//*

Add HTML markup (HTML element for which we create image)

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px;

padding-left: 25px; padding-top: 10px;">
<strong>Codepedia.info</strong><hr />
<h2 style="color: #3e4b51;">
Html to canvas, and canvas to proper image
</h2>
<p style="color: #3e4b51;">
<b>Codepedia.info</b> is a programming blog. Tutorials focused on Programming
ASP.Net,
C#, jQuery, AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server,
NodeJs,
Web Design, Software</p>
<p style="color: #3e4b51;">
<b>html2canvas</b> script allows you to take "screenshots" of webpages or parts
of it, directly on the users browser. The screenshot is based on the DOM and as
such may not be 100% accurate to the real representation as it does not make an
actual screenshot, but builds the screenshot based on the information available
on the page.
</p>
</div>
<input id="btn-Preview-Image" type="button" value="Preview" />
<a id="btn-Convert-Html2Image" href="#">Download</a>
<br />
<h3>Preview :</h3>
<div id="previewImage">
</div>

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-Html2Image").on('click', function () {
var imgageData = getCanvas.toDataURL("image/png");
// Now browser starts downloading it instead of just showing it
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
$("#btn-Convert-Html2Image").attr("download", "your_pic_name.png").attr("href", newData);
});
//*

OUTPUT:=>
Download Project (/Content/Document/158_HTMLtoImageinJquery.zip)

109

SHARE
TWEET (HTTPS://TWITTER.COM/SHARE?
URL=HTTPS://WWW.VISHWASSINGH.COM/HOME/POSTCONTENT/40&TEXT=CONVERT HTML TO IMAGE IN

JQUERY &HASHTAGS=CONVERT HTML TO IMAGE IN JQUERY ,CONVERT HTML TO IMAGE IN JQUERY )

PLUS (HTTPS://PLUS.GOOGLE.COM/SHARE?
URL=HTTPS://WWW.VISHWASSINGH.COM/HOME/POSTCONTENT/40&TEXT = CONVERT HTML TO IMAGE IN

JQUERY )
REDDIT (HTTP://REDDIT.COM/SUBMIT?
URL=HTTPS://WWW.VISHWASSINGH.COM/HOME/POSTCONTENT/40&TITLE=CONVERT HTML TO IMAGE IN

JQUERY )

LINKEDIN (HTTP://WWW.LINKEDIN.COM/SHAREARTICLE?
MINI=TRUE&URL=HTTPS://WWW.VISHWASSINGH.COM/HOME/POSTCONTENT/40)
 Enregistrer

RECENT POSTS

Partial View in ASP.Net MVC (../PostContent/50)

Oct 13, 2017

CSS CHEAT SHEAT (../PostContent/49)

Oct 10, 2017

HTML Cheat Sheet (../PostContent/48)

Oct 10, 2017

Jquery 1.3 CheatSheet (../PostContent/47)

Oct 04, 2017

jQuery Traversing (../PostContent/46)

Sep 26, 2017

CATEGORIES

HTML (../post/12)

Database (../post/18)

MS Sql (../post/19)

Jquery (../post/16)

BootStrap (../post/17)

ASP (../post/7)

Jquery UI (../post/15)

ARCHIVES

Sep 26, 2017

Sep 10, 2017

Sep 08, 2017

Oct 13, 2017

Oct 10, 2017

Oct 04, 2017

Jun 30, 2017

Jul 24, 2017

Jul 13, 2017

Jul 09, 2017

TAGS

Art Awesome Style Image Design Post Three Typhography BDinfosys

Vishwassingh All Rights Reserved

HOME

MY BOLG

TECHNOLOGY

THOUGHT

ANGULAR JS (../POST/14)

ASP (../POST/7)

ASP.NET (../POST/5)

BOOTSTRAP (../POST/17)

C# (../POST/3)

ENTITY FRAMEWORK (../POST/20)

HTML (../POST/12)

HTML/CSS (../POST/8)

JASON (../POST/23)
 JAVA SCRIPT (../POST/22)

JQUERY (../POST/16)

JQUERY UI (../POST/15)

LINQ (../POST/26)

MS SQL (../POST/19)

MVC (../POST/13)

SEO (../POST/24)

WEB-ANALYTICS (../POST/25)

Facebook
Linkdin
Twitter
Google Plus
Dribbble
Behance