This time I will share jQuery Plugin and tutorial about Capture HTML Elements And Download As An Image – jQuery Screenshot, hope it will help you in programming stack.
A jQuery script which makes uses of html2canvas.js and canvas2image.js to capture the screenshot of specific HTML elements.
You can specify the height, width, file name and file type (png, jpg, or bmp) before downloading the screenshot.
Dependencies:
How to use it:
1. Load the required resources in your html document.
2 |
integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" |
3 |
crossorigin="anonymous"> |
5 |
<script src="html2canvas.min.js"></script> |
6 |
<script src="canvas2image.js"></script> |
2. Create a trigger element that will take the screenshot of a specific HTML node.
3. Create a trigger element that will convert the canvas into a downloadable image.
4. Create form controls to customize the image output.
01 |
<label for="imgW">Image Width:</label> |
02 |
<input type="number" value="" id="imgW" placeholder="Image Width" /> |
03 |
<label for="imgH">Image Height:</label> |
04 |
<input type="number" value="" id="imgH" placeholder="Image Height" /> |
05 |
<label for="imgFileName">File Name:</label> |
06 |
<input type="text" placeholder="File Name" id="imgFileName" /> |
08 |
<option value="png">png</option> |
09 |
<option value="jpeg">jpeg</option> |
10 |
<option value="bmp">bmp</option> |
12 |
<button id="save">Save And Download</button> |
5. Specify the HTML node you want to take the screenshot.
1 |
var test = $(".example").get(0); |
6. The main JavaScript to take a screenshot of the HTML node.
02 |
$('.toCanvas').click(function(e) { |
03 |
html2canvas(test).then(function(canvas) { |
05 |
var canvasWidth = canvas.width; |
07 |
var canvasHeight = canvas.height; |
09 |
$('.toCanvas').after(canvas); |
11 |
$('.toPic').show(1000); |
13 |
$('.toPic').click(function(e) { |
14 |
var img = Canvas2Image.convertToImage(canvas, canvasWidth, canvasHeight); |
16 |
$(".toPic").after(img); |
18 |
$('#save').click(function(e) { |
19 |
let type = $('#sel').val(); |
20 |
let w = $('#imgW').val(); |
21 |
let h = $('#imgH').val(); |
22 |
let f = $('#imgFileName').val(); |
23 |
w = (w === '') ? canvasWidth : w; |
24 |
h = (h === '') ? canvasHeight : h; |
26 |
Canvas2Image.saveAsImage(canvas, w, h, type, f); |
This awesome jQuery plugin is developed by usecodelee. For more Advanced Usages, please check the demo page or visit the official website.
