【JQuery插件】把网页或某div或table表格内容转为图片并下载
今天介绍一个非常好用的JQuery插件，它可以把网页或某个div或table表格内容转为图片并下载保存。这个插件叫 html2canvas ，它只有一个js文件 html2canvas.js ，而使用起来也非常简单。
先看一个实例html代码，后面再介绍如何使用。
<html>
<head>
<script src=”
<script src=”
</head>
<body>
<div id=”
<strong>卡卡网 WebKaka.com</strong><hr/>
<h3 style=”color: #3e4b51;”>
Html转换为图片
</h3>
<p style=”color: #3e4b51;”>
<b>卡卡网 WebKaka.com</b> 旨在为广大网站建设人员提供专业的网站测速和优化服务，以及为广大网民提供网络速度测试服务。
</p>
<p style=”color: #3e4b51;”>
<b>html2canvas</b> 脚本可以直接在用户浏览器上用来对网页或其一部分内容进行截图，截图是基于DOM的，因此可能不完全准确。
</p>
</div>
<input id=”
<a id=”
<br/>
<h3>预 览 :</h3>
<div id=”
<script>
$(document).ready(function(){
var element = $(“
var getCanvas; // global variable
$(“
html2canvas(element, {
onrendered: function (canvas) {
$(“
getCanvas = canvas;
}
});
});
$(“
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”);
$(“
});
});
</script>
</body>
</html>
execcodegetcode
下面介绍如何使用该插件，主要有三步。
第一步：调用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 id=”
<a id=”
<br/>
<h3>预 览 :</h3>
<div id=”
</div>
第三部：生成和下载图片的JQuery实现代码
代码如下：
<script>
$(document).ready(function(){
var element = $(“
var getCanvas;
$(“
html2canvas(element, {
onrendered: function (canvas) {
$(“
getCanvas = canvas;
}
});
});
$(“
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”);
$(“
});
});
</script>
编写代码的时候，只需把jquery实现代码的各个id名称与html代码里的各个id对应一致就行了。
插件下载
html2canvas.js文件下载。
链接: https://pan.baidu.com/s/1FDy5wz67Y_DZGSoRbqd-Zg
提取码: ks6r
