【JQuery插件】把网页或某div或table表格内容转为图片并下载
今天介绍一个非常好用的JQuery插件,它可以把网页或某个div或table表格内容转为图片并下载保存。这个插件叫 html2canvas
,它只有一个js文件 html2canvas.js
,而使用起来也非常简单。
先看一个实例html代码,后面再介绍如何使用。
<html> <head> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="html2canvas.js"></script> </head> <body> <div > <strong>卡卡网 WebKaka.com</strong><hr/> <h3 > Html转换为图片 </h3> <p > <b>卡卡网 WebKaka.com</b> 旨在为广大网站建设人员提供专业的网站测速和优化服务,以及为广大网民提供网络速度测试服务。 </p> <p > <b>html2canvas</b> 脚本可以直接在用户浏览器上用来对网页或其一部分内容进行截图,截图是基于DOM的,因此可能不完全准确。 </p> </div> <input type="button" value="预 览"/> <a href="#">下载</a> <br/> <h3>预 览 :</h3> <div ></div> <script> $(document).ready(function(){ 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; } }); }); $("#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); }); }); </script> </body> </html>
下面介绍如何使用该插件,主要有三步。
第一步:调用jquery库文件和html2canvas.js文件
jquery库文件可以调用百度公共库的文件,而html2canvas.js
文件需要下载到本地来调用,本文后面会附上下载地址。
代码如下:
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="html2canvas.js"></script>
第二步:预览和下载的html代码
点击“预览”可看到生成的图片,点击“下载”可把图片下载保存起来。
代码如下:
<input type="button" value="预 览"/> <a href="#">下载</a> <br/> <h3>预 览 :</h3> <div > </div>
第三部:生成和下载图片的JQuery实现代码
代码如下:
<script> $(document).ready(function(){ //这是要转成图片的div id var element = $("#html-content-holder"); var getCanvas; //这是预览按钮的id $("#btn-Preview-Image").on('click', function () { html2canvas(element, { onrendered: function (canvas) { //这是显示预览图的id $("#previewImage").append(canvas); getCanvas = canvas; } }); }); //这是下载图片的id $("#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); }); }); </script>
- 上一篇 »HTML表格代码
- 下一篇 »《CSS3秘籍》,第三版-读书笔记