js网页保存为图片简单介绍

本章介绍一下如何利用html2canvas库实现将网页保存为图片的效果。

过程其实是这样的，那就是首先把网页保存为Canvas画布，然后再将其保存为图片形式。

下面就简单分布做一下介绍，希望能够给需要的朋友带来帮助。

一.将网页保存为Canvas画布:

首先将网页保存为Canvas画布，这个要借助于html2canvas库。

此库可以自行在网上查询。

代码如下:

[ bootstrap ] 运行代码下载代码

<script>
html2canvas(document.getElementById("id1"),{ 
  onrendered:function(canvas){ 
    //生成画布后如何处理，当然可以在新标签打开，在浮层展示等等 
    document.getElementById("id2").appendChild(canvas);
  }, 
  //通过修改html2canvas源码添加canvas的id 
  canvas_id: 'canvas'
});
</script>

特别说明:

html2canvas()第一个参数为要生成canvas的区域，如果整个网页生成canvas，则是document.body。第二个参数详见官网设置canvas的各种属性，当然修改源代码可以添加自己想要的属性，如给canvas添加id等。

二.把第一步中生成的canvas保存成图片:

[ bootstrap ] 运行代码下载代码

<script>
var canvas=document.getElementById("canvas"),
url=canvas.toDataURL();// 
//以下代码为下载此图片功能 
var triggerDownload=$("<a>").attr("href", url).attr("download", "img.png").appendTo("body"); 
triggerDownload[0].click(); 
triggerDownload.remove();
</script>

代码描述：js网页保存为图片。js网页保存为图片简单介绍

下载全部收藏

184 245

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册