Firefox 截图插件开发 WEB前端

在浏览网页的时候，看到好的内容都想保存下来，但是有些网页是禁止拷贝的，当然我们可以hack它以达到copy的目的，更快捷的方式则是截屏。于是想到了在Firefox下做一个截图软件，部分参考了screengrab这个插件。

这个插件用于我们一个网页兼容性测试结果比较和在GILD上存题使用，替GILD打个广告，技术人员可以在上面参与答题竞赛，可以拿到一些奖品的，如ipad、ipod等。

言归正传，开始插件开发

[b]1. 老生长谈之插件目录结构[/b]

xxxcapture
|
| ---- chrome
|--content
| -- overlay.xul
| -- options.xul
| -- gild.js
| -- defaults
| -- preferences
| -- pref.js
| -- chrome.manifest
| -- install.rdf

[b]install.rdf[/b]
这个是安装描述文件，

dev@gild.com
1.0
2

{ec8030f7-c20a-464f-9b0e-13a3a9e97384}
1.5
3.6.*

Gild Capture
Gild Certification Screen capture
Jay
http://www.example.com/

这里主要的是和表示所支持的Gecko的版本范围

[b]chrome.manifest[/b]
这个文件里的内容主要包括了两个作用，
[list]
[*]定义文件的相对路径
[*]定义一些界面文件的位置
[/list]
如：
content GildCapture chrome/content/
overlay chrome://browser/content/browser.xul chrome://GildCapture/content/overlay.xul

剩下的就是实现方面的了，主要是overlay.xul和gild.js

[b]2. 定义插件菜单[/b]

界面重写部分在overlay.xul文件中，我们在status bar上定义一个弹出菜单

tooltiptext="Gild Capture"
insertafter="page-report-button,security-button"
context="gild-status-popup">

【Firefox 截图插件开发】

[b]
3.实现截图[/b]
截图部分有三个主要部分选取窗口区域，捕获图片和输出到文件。

[b]选取窗口区域[/b]
此插件是截取整个document的内容所以会考虑到有滚动条的情况，并且考虑到有些document是按照quirks mode渲染的，此时其宽度和高度将从根元素上获得

getVisibleRegion:function() { var win = window.top.getBrowser().selectedBrowser.contentWindow; var htmlWin = win.content.window; var htmlDoc = win.document; var r = {}; r.x = htmlWin.scrollX; r.y = htmlWin.scrollY; if(htmlDoc.compatMode == "CSS1Compat") { //standard mode r.width = htmlDoc.documentElement.clientWidth; r.height = htmlDoc.documentElement.clientHeight; } else { r.width = htmlDoc.body.clientWidth; r.height = htmlDoc.body.clientHeight; } return r; }

[b]
捕获图片[/b]
图片的获取是通过canvas这个元素，FF 从1.5就已经支持它了，虽然在HTML5中才公开支持。

var r = this.getScrollRegion(); var canvas = document.createElementNS("http://www.w3.org/1999/xhtml", "html:canvas"); canvas.width = r.width; canvas.height = r.height; canvas.style.width = canvas.style.maxwidth = r.width + 'px'; canvas.style.height = canvas.style.maxheight = r.height + 'px'; var context = canvas.getContext("2d"); context.clearRect(r.x,r.y,r.width,r.height); context.save(); context.drawWindow(window._content,r.x,r.y,r.width,r.height,"rgb(255,255,255)");

[b]保存图片到文件[/b]
保存图片则是通过文件的一些I/O Api和nsWebBrowserPersist输出到文件，

var dir = this.getSaveFolder(); dir.append(this.serial++ + ".jpg"); dir.createUnique(Components.interfaces.nsIFile.NORMAL_FILE_TYPE,0666); var f = Components.classes["@mozilla.org/file/local; 1"].createInstance(Components.interfaces.nsILocalFile); f.initWithPath(dir.path); var io = Components.classes["@mozilla.org/network/io-service; 1"].getService(Components.interfaces.nsIIOService); var source = io.newURI(canvas.toDataURL("image/jpeg","quality=60"),"UTF8",null); var persist = Components.classes["@mozilla.org/embedding/browser/nsWebBrowserPersist; 1"].createInstance(Components.interfaces.nsIWebBrowserPersist); persist.persistFlags = Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_REPLACE_EXISTING_FILES; persist.persistFlags |= Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_AUTODETECT_APPLY_CONVERSION; persist.saveURI(source,null,null,null,null,f);