Javascript保存网页为图片

第一步，把网页保存为Canvas画布，借助于html2canvas库，http://html2canvas.hertzen.com/

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

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

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

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();

这里关注toDataURL()方法即可，可以把canvas转化成data形式的图片url，把这个url赋给<img/>标签即可显示图片，代码中其他部分为自己需要的下载功能。

Javascript保存网页为图片相关推荐

php js 异步上传图片,javascript实现异步图片上传方法实例
如何通过javascript写出异步图片上传?本文我们就和大家分享一些实例代码javascript实现异步图片上传.我们首先看下HTML代码实现的form提交部分.其中大家在测试的时候需要把test的 ...
html预览图片的功能,javascript实现的图片预览功能
本文实例讲述了javascript实现的图片预览功能.分享给大家供大家参考,具体如下: 1.将下面的代码复制到内 /* Thumbnail image viewer- ?Dynamic Drive ...
Javascript 仿Flash 图片切换及 Flash 图片切换
1. Javascript 仿Flash 图片切换 http://www.fansart.com/cweb/200669141456.asp <a target=_self href=" ...
怎么让图片从左往右移动php,javascript - 想让图片上那个块，在增加块的宽度的时候向右边移动，而不是向左边移动。需要怎么解决？...
javascript - 想让图片上那个块,在增加块的宽度的时候向右边移动,而不是向左边移动.需要怎么解决? 滿天的星座2017-07-05 10:39:20 0 2 212 * { marg ...
JavaScript点击图片提示
JavaScript点击图片提示 <img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.rHuc8SKa0wLVwCqqA27uIwHaEt ...
javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...
html中图片自动循环滚动代码,JavaScript代码实现图片循环滚动效果
1.概述循环滚动图片,不仅可以增添Web页面的动态效果,而且可以节省页面空间,有效地保证在有限的页面中显示更多的图片. 2.技术要点主要应用setTimeout()方法实现图片的循环滚动效果.se ...
JavaScript WebGL 使用图片疑惑点
引子 JavaScript WebGL 使用图片之后产生了一些疑问. Origin My GitHub 为什么纹理坐标取几个点就可以获取图片内容? WebGL 中图像的坐标系原点位于左下角,水平正方向 ...
图片怎么转为html格式,Win10如何保存网页为图片？Html页面转为图片格式的方法...
Win10如何保存网页为图片?实际上,如果用户安装过一些虚拟打印机可以直接打印为图片格式(见方法一),当然,如果用户没有安装任何虚拟打印机,则可以使用直接保存的方法将其保存为图片,该操作需要第三方浏览 ...
html设置图片切割,JavaScript html js图片切割系统
JavaScript html js图片切割系统,裁剪,图片处理关键字: javascript html js 图片切割系统裁剪处理图片切割(裁剪),这里需要声明一下: 首先js是不能操作客户端文 ...

Javascript保存网页为图片

Javascript保存网页为图片相关推荐

最新文章

热门文章