技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

【JQuery插件】把网页或某div或table表格内容转为图片并下载

作者:admin    时间:2019-3-7 7:54:8    浏览:

今天介绍一个非常好用的JQuery插件,它可以把网页或某个div或table表格内容转为图片并下载保存。这个插件叫 html2canvas ,它只有一个js文件 html2canvas.js ,而使用起来也非常简单。

先看一个实例html代码,后面再介绍如何使用。

<html>
<head>
<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="html2canvas.js"></script>
</head>
<body>

<div id="html-content-holder" style="background-color: #F0F0F1; color: #00cc65; width: 500px; padding-left: 25px; padding-top: 10px;padding-right: 25px;padding-bottom: 15px;margin-bottom:15px;">
  <strong>卡卡网 www.82hpn.com.cn</strong><hr/>
  <h3 style="color: #3e4b51;">
    Html转换为图片
  </h3>
  <p style="color: #3e4b51;">
    <b>卡卡网 www.82hpn.com.cn</b> 旨在为广大网站建设人员提供专业的网站测速和优化服务,以及为广大网民提供网络速度测试服务。
  </p>
  <p style="color: #3e4b51;">
    <b>html2canvas</b> 脚本可以直接在用户浏览器上用来对网页或其一部分内容进行截图,截图是基于DOM的,因此可能不完全准确。
  </p>
</div>

<input id="btn-Preview-Image" type="button" value="预 览"/>
<a id="btn-Convert-Html2Image" href="#">下载</a>
<br/>
<h3>预 览 :</h3>
<div id="previewImage"></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>

execcodegetcode

下面介绍如何使用该插件,主要有三步。

第一步:调用jquery库文件和html2canvas.js文件

jquery库文件可以调用百度公共库的文件,而html2canvas.js文件需要下载到本地来调用,本文后面会附上下载地址。

代码如下:

<script src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="html2canvas.js"></script>

第二步:预览和下载的html代码

点击“预览”可看到生成的图片,点击“下载”可把图片下载保存起来。

代码如下:

<input id="btn-Preview-Image" type="button" value="预 览"/>
<a id="btn-Convert-Html2Image" href="#">下载</a>
<br/>
<h3>预 览 :</h3>
<div id="previewImage">
</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>

编写代码的时候,只需把jquery实现代码的各个id名称与html代码里的各个id对应一致就行了。

插件下载

html2canvas.js文件下载。

链接: https://pan.baidu.com/s/1FDy5wz67Y_DZGSoRbqd-Zg
提取码: ks6r

标签: html2canvas  html2image  div  image  table  
  • IT热文
  • 站长推荐
  • 把握和传承好“变则通”思想(大家手笔) 2019-03-19
  • 个税法迎第七次大修 起征点调至每年6万元 2019-03-19
  • 回复@tdeqs:剥削跟所有制没有必然关系!你用自有的生产资料独自(自主劳动自负盈亏)或与他人联合(共同决策利益共享风险共担)生产,跟剥削有啥关系? 2019-03-18
  • 老人突然发病如何求助 2019-03-17
  • 深圳--深圳频道--人民网 2019-03-17
  • 河北鸡泽:手工挂面促农增收 2019-03-16
  • “开裂”的冰岛文章中国国家地理网 2019-03-15
  • 为迎香港回归,他用99天徒步走完京九线 2019-03-14
  • 第二届未来汽车大会暨日照新能源汽车人才与产业峰会在日照举办 2019-03-13
  • “旺角骚乱案”10名被告暴动罪全部成立 最年轻者判刑超过4年 2019-03-12
  • 【专题】河北省无偿献血领导小组会议报道 2019-03-12
  • 十大城市二手房市场“整体降温”态势难改 2019-03-11
  • 福音!全球首例3D打印眼角膜 数百万盲人重获光明不再遥不可及 2019-03-10
  • 影驰HOF II DDR4内存发布:液氮超频5.3GHz影驰HOFIIDDR4内存发布-手机行情 2019-03-09
  • 地中海上漂了8天 被“拒收”的移民船终靠岸 2019-03-08
  • 41| 265| 490| 145| 540| 795| 411| 660| 125| 605|