第一步, 把网页保存为 Canvas 画布, 借助于 html2canvas 库,[url]http://html2canvas.hertzen.com/[/url][/color]
- [color=#362e2b][code]html2canvas(document.getElementById("id1"), {
- onrendered: function(canvas) {
- document.getElementById("id2").appendChild(canvas);// 生成画布后如何处理, 当然可以在新标签打开, 在浮层展示等等
- },
- canvas_id: 'canvas'// 通过修改 html2canvas 源码添加 canvas 的 id
- }); [/code]
Note:html2canvas()第一个参数为要生成 canvas 的区域, 如果整个网页生成 canvas, 则是 document.body 第二个参数详见官网设置 canvas 的各种属性, 当然修改源代码可以添加自己想要的属性, 如给 canvas 添加 id 等
[p][code]var canvas = document.getElementById("canvas"), // 第一步 canvas 添加的自定义 id
url = canvas.toDataURL();/$/ 以下代码为下载此图片功能
- var triggerDownload = $("<a>").attr("href", url).attr("download", "img.png").appendTo("body");
- triggerDownload[0].click();
triggerDownload.remove(); [/code]这里关注 toDataURL()方法即可, 可以把 canvas 转化成 data 形式的图片 url, 把这个 url 赋给 < img/>标签即可显示图片, 代码中其他部分为自己需要的下载功能[/p]
来源: http://www.qdfuns.com/article/12465/ad95094a896cfdbd4ce316fef9000171.html