Skip to content

Instantly share code, notes, and snippets.

@saileshkush95

saileshkush95/Convert div content into Image

Last active December 21, 2019 16:08
Show Gist options
  • Save saileshkush95/cc25d4c5cb3bdf4b377260fbf1b0a17a to your computer and use it in GitHub Desktop.
Save saileshkush95/cc25d4c5cb3bdf4b377260fbf1b0a17a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Convert div content into Image
<!DOCTYPE html>
<html>
<head>
<title>Convert Div Into Image</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://files.codepedia.info/files/uploads/iScripts/html2canvas.js">
</script>
<style>
canvas {
width: 100% !important;
}
#html-content-holder {
background-color: #F0F0F1;
color: #00cc65;
width: 500px;
padding-left: 25px;
padding-top: 10px;
}
</style>
</head>
<body>
<center>
<h2 style="color:purple"> Convert div to image</h2>
<div id="html-content-holder">
<strong>GeeksForGeeks</strong>
<hr />
<h3 style="color: #3e4b51;">ABOUT US</h3>
<p style="color: #3e4b51;">
<b>GeeksForGeeks</b> is a portal and a forum for many tutorials focusing on Programming
ASP.Net, C#, jQuery,AngularJs, Gridview, MVC, Ajax, Javascript, XML, MS SQL-Server,
NodeJs, Web Design, Software and much more
</p>
<p style="color: #3e4b51;">
How many times were you frustrated while looking out for a good collection of
programming/algorithm/interview questions? What did you expect and what did you get?
This portal has been created to provide well written, well thought and well
explained solutions for selected questions.
</p>
</div>
<input type="button" id="btn-Preview-Image" value="Preview" class="btn btn-primary" data-toggle="modal"
data-target="#exampleModal" />
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Image Preview</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="previewImage">
</div>
<div class="modal-footer">
<a id="btn-Convert-Html2Image" href="#" type="button" class="btn btn-primary">
Download
</a>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
// Global variable
var element = $("#html-content-holder");
// Global variable
var getCanvas;
$("#btn-Preview-Image").on('click', function () {
html2canvas(element, {
onrendered: function (canvas) {
$("#previewImage").empty();
$("#previewImage").append(canvas);
getCanvas = canvas;
}
});
});
$("#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", "GeeksForGeeks.png").attr(
"href", newData);
});
});
</script>
</center>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment