脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 保存网页为图片

Javascript保存网页为图片借助于html2canvas库实现

 更新时间：2014年09月05日 09:44:47   投稿：whsnow  
借助于html2canvas库，把网页保存为Canvas画布，再把生成的canvas保存成图片，下面的示例，大家可以看看

第一步，把网页保存为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("<span style="font-family: Arial, Helvetica, sans-serif;">canvas"</span><span style="font-family: Arial, Helvetica, sans-serif;">),</span> 
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/>标签即可显示图片，代码中其他部分为自己需要的下载功能。

您可能感兴趣的文章:

相关文章

  • JS实现百度搜索框关键字推荐

    JS实现百度搜索框关键字推荐

    这篇文章主要为大家详细介绍了JS实现百度搜索框关键字推荐，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 分享11个常用JavaScript小技巧

    分享11个常用JavaScript小技巧

    在我们的日常开发过程中，我们经常会遇到数字与字符串转换，检查对象中是否存在对应值，条件性操作对象数据，过滤数组中的错误值，等等这类处理。本文整理出了一些常用的小技巧，希望大家能喜欢
    2022-06-06
  • 复制网页内容，粘贴之后自动加上网址的实现方法(脚本之家特别整理)

    复制网页内容，粘贴之后自动加上网址的实现方法(脚本之家特别整理)

    复制内容加网址的功能，自06年脚本之家将这个功能发布并通过blueidea宣传以后，现如今很多网站都使用上了， 当初我们也由这个功能带来很多外链
    2014-10-10
  • 深入了解JavaScript发布订阅模式

    深入了解JavaScript发布订阅模式

    JavaScript 发布订阅模式（Publish/Subscribe Pattern）是一种常用的设计模式，发布订阅模式的核心思想是解耦事件的发生和事件的处理，本文将介绍 JavaScript 发布订阅模式的基本原理、应用场景以及各场景的代码示例,需要的朋友可以参考下
    2023-05-05
  • JavaScript常用方法和封装详情

    JavaScript常用方法和封装详情

    这篇文章主要介绍了JavaScript常用方法和封装详情，文章围绕JavaScript的方法和封装相关资料展开详情，具有一定的参考价值，需要的小伙伴可以参考一下
    2022-03-03
  • 浏览器兼容console对象的简要解决方案分享

    浏览器兼容console对象的简要解决方案分享

    不同浏览器或者版本之间对于console对象的支持不尽相同，而console方法在开发调试过程中都是不错的工具。难道要在上线前把所有console.xxxx去掉以保证某些浏览器不报错么。其实可以变通解决
    2013-10-10
  • ES6中Generator与异步操作实例分析

    ES6中Generator与异步操作实例分析

    这篇文章主要介绍了ES6中Generator与异步操作,结合实例形式分析Generator的概念、功能及相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • JS 自动完成 AutoComplete(Ajax 查询)

    JS 自动完成 AutoComplete(Ajax 查询)

    实现类似于百度或谷歌的搜索下拉列表的，就是打开百度往里输入你要查询的条件，只要你一输入他就自动弹出一个下拉列表框，并显示相关所有搜索内容
    2009-07-07
  • javascript实现的简单的表单验证

    javascript实现的简单的表单验证

    这篇文章主要介绍了javascript实现的简单的表单验证的相关资料,需要的朋友可以参考下
    2015-07-07
  • JavaScript中停止执行setInterval和setTimeout事件的方法

    JavaScript中停止执行setInterval和setTimeout事件的方法

    这篇文章主要介绍了JavaScript中停止执行setInterval和setTimeout事件的方法,本文给出操作实例代码和语法介绍,需要的朋友可以参考下
    2015-05-05

最新评论