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
