用Javascript开发网页截屏插件
实现思路用html2canvas.js将元素转换成canvas,在将canvas转成图片。
html2canvas(document.body, {
onrendered: function(canvas) {
//将canvas转成base64
console.log(canvas.toDataURL());
}
});
最后将base64的数据赋值给a标签的href属性,并且给a标签加上downlaod属性即可实现下载。
html2canvas.js将元素转成canvas的原理好像是通过svg实现的,如果你感兴趣可以研究一下。
如果想实现通用的网站截图工具,那么可以制作成一个chrome插件,这里我已经写好了,需要的可以下载。
写插件的时候遇到一个问题,就是在测试环境下,content_scripts中向browser_action中发送数据,但在browser_action中并没有响应它的事件,我打开它的控制台刷新才执行了。
用Javascript开发网页截屏插件的更多相关文章
- Sketch网页截屏插件设计开发
1.需求 在Sketch的Artboard中插入网页截图: 1.1.输入网址,自动截图到Artboard中,并居中显示: 1.2.可截取网页局部图片 2.技术选型 技术的选型主要是针对截图功能的选型, ...
- Java实现网页截屏功能(基于phantomJs)
公司最近有个需求:把用户第一次的测量身体信息和最近一次测量信息进行对比,并且需要把对比的数据截成图片可以发给用户(需要在不打开网页的情况下实时对网页进行截图然后保存到服务器上,返回图片地址),通过网上 ...
- Web截屏插件
官方网站:http://www.ncmem.com 官方博客:http://www.cnblogs.com/xproer 产品首页:http://www.ncmem.com/webplug/scppr ...
- 利用PhantomJS进行网页截屏,完美解决截取高度的问题
关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS ...
- PhantomJS linux系统下安装步骤及使用方法(网页截屏功能)
PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, ...
- 利用PhantomJS进行网页截屏
利用PhantomJS进行网页截屏 关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种W ...
- php结合phantomjs实现网页截屏、抓取js渲染的页面
首先PhantomJS快速入门 PhantomJS是一个基于 WebKit 的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, ...
- WordPress 3.7.1-web截屏插件整合教程-Xproer.ScreenCapture
插件下载(PHP):wordpress 3.7.1, 说明:由于许多插件可能使用相同钩子,导致冲突,所以提供手支方式整合. 1.上传插件目录. 说明:WordPress 3.7.1 使用的是TinyM ...
- html转图片网页截屏(二)PhantomJS
关于PhantomJS PhantomJS 是一个基于WebKit的服务器端 JavaScript API.它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS ...
随机推荐
- Write Markdown Syntax Online Document with Sphinx and Pandoc
There is no doubt that we have to write doc while we are developing software. But How do you write d ...
- hihocoder#1631 : Cats and Fish
Description There are many homeless cats in PKU campus. They are all happy because the students in t ...
- java后台技术
本文旨在梳理服务端开发技术栈,希望帮助后端开发同学更全面了解Java服务端主要涉及的知识点 1. 语言相关 1.1 Java 核心知识点 Java的类加载机制 JVM相关:JVM内存模型和结构,GC原 ...
- 解决UNIGUI字体太小的问题
解决UNIGUI字体太小的问题 Unigui运行在chrome浏览器下可以有最佳的效果,但用ie打开用unigui做的项目会发现字体明显小一截,可以用自定义css来解决这个问题. 可以在UniServ ...
- 实验8 LCD8*8点阵
1.控制点阵红绿交替显示,分别从上到下,从左到右循环闪烁三次 接线: P0接J12.P1接J20.P2接J19 /** 1.控制点阵红绿交替显示,分别从上到下,从左到右循环闪烁三次 **/ #incl ...
- openstack手动安装
安装文档: https://github.com/yongluo2013/osf-openstack-training/blob/master/installation/openstack-iceho ...
- 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid
[源码下载] 背水一战 Windows 10 (53) - 控件(集合类): ItemsControl 的布局控件 - ItemsStackPanel, ItemsWrapGrid 作者:webabc ...
- 关于Maven整合SSM项目中报错Invalid bound statement (not found):的问题解决
如图:控制不报错 页面就是报500的错误 查阅了好多资料 都说是Mapper文件写的不对 我仔细找了好几遍也解决不了问题.. 解决: 坑爹的问题害我找了一上午原因,原来是需要在pom.xml文件中 ...
- mysql多列索引
1,数据库每次查询只能使用一个索引 2,假设数据 表T (a,b,c) rowid 为物理位置rowid a b c(1) 1 1 1(2) 2 1 13(3) 2 2 14(4) 1 3 3(5) ...
- 尝试利用slmail的漏洞来getshell
作者:Joe 本文属于Arctic shell原创内容计划文章,转载请注明原文地址! 二进制,计算机才可以理解的低级语言,简单来说它是一种信号,用电信号为例,0就是断电,而1就是有电,这样子010 ...