技能路线很清晰，将网页的某个区域的内容天生图像，保持到canvas里，然后将canvas内容转换成图片，保存到本地，末了上传到微博。
我在网上征采到html2canvas这个能将指定网页元素内容天生canvas图像的javascript工具。这个js工具的用法很大略，你只须要将它的js文件引入到页面里，然后调用html2canvas()函数：
html2canvas(document.body, { onrendered: function(canvas) { / canvas is the actual canvas element, to append it to the page call for example document.body.appendChild( canvas ); / }});
这个html2canvas()函数有个参数，上面的例子里传入的参数是document.body，这会截取全体页面的图像。如果你想只截取一个区域，比如对某个p或某个table截图，你就将这个p或某个table当做参数传进去。
我终极并没有选用html2canvas这个js工具，由于在我的实验过程中创造它有几个问题。
首先，跨域问题。我举个例子解释这个问题，比如我的网页网址是http://www.webhek.com/about/，而我在这个页面上有个张图片，这个图片并不是来自www.webhek.com域，而是来自CDN图片做事器www.webhek-cdn.com/images/about.jpg，那么，这张图片就和这个网页不是同域，那么html2canvas就无法对这种图片进行截图，如果你的网站的所有图片都放在单独的图片做事器上，那么用html2canvas对全体网页进行截图是就会创造所有图片的地方都是空缺。
这个问题也有补救的方法，便是用代理：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>html2canvas php proxy</title> <script src="html2canvas.js"></script> <script> //<![CDATA[ (function() { window.onload = function(){ html2canvas(document.body, { "logging": true, //Enable log (use Web Console for get Errors and Warnings) "proxy":"html2canvasproxy.php", "onrendered": function(canvas) { var img = new Image(); img.onload = function() { img.onload = null; document.body.appendChild(img); }; img.onerror = function() { img.onerror = null; if(window.console.log) { window.console.log("Not loaded image from canvas.toDataURL"); } else { alert("Not loaded image from canvas.toDataURL"); } }; img.src = canvas.toDataURL("image/png"); } }); }; })(); //]]> </script> </head> <body> <p> <img alt="google maps static" src="http://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=800x600&maptype=roadmap&sensor=false"> </p> </body></html>
这个方法只能用在你自己的做事器里，如果是对别人的网页截图，还是弗成。
试验的过程中还创造用html2canvas截屏出来的图像有时会涌现笔墨重叠的征象。我估计是由于html2canvas在解析页面内容、处理css时不是很完美的缘故原由。
末了，我在火狐浏览器的官方网站上找到了drawWindow()这个方法，这个方法和上面提到html2canvas不同之处在于，它不剖析页面元素，它只针对区域，也便是说，它接管的参数是四个数字标志的区域，不论这个区域中什么地方，有没有页面内容。
void drawWindow( in nsIDOMWindow window, in float x, in float y, in float w, in float h, in DOMString bgColor, in unsigned long flags [optional]);
这个原生的JavaScript方法看起来非常的完美，正是我须要的，但这个方法不能利用在普通网页中，由于火狐官方创造这个方法会引起有安全漏洞，在这个bug修复之前，只有具有“Chrome privileges”的代码才能利用这个drawWindow()函数。
虽然有很大的限定，但周折一下还是可以用的，在我开拓的火狐addon插件中，main.js便是具有“Chrome privileges”的代码。我在网上创造了一段火狐插件SDK里自带代码样例：
var window = require('window/utils').getMostRecentBrowserWindow();var tab = require('tabs/utils').getActiveTab(window);var thumbnail = window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");thumbnail.mozOpaque = true;window = tab.linkedBrowser.contentWindow;thumbnail.width = Math.ceil(window.screen.availWidth / 5.75);var aspectRatio = 0.5625; // 16:9thumbnail.height = Math.round(thumbnail.width aspectRatio);var ctx = thumbnail.getContext("2d");var snippetWidth = window.innerWidth .6;var scale = thumbnail.width / snippetWidth;ctx.scale(scale, scale);ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth aspectRatio, "rgb(255,255,255)");// thumbnail now represents a thumbnail of the tab
这段代码写的非常清楚，只须要依据它做轻微的修正就能适应自己的需求。
这里
发送【前端资料】
就可以获取领取地址，免费送给大家。对付学习web前端有任何问题（学习方法，学习效率，如何就业）都可以问我。希望你也能凭自己的努力，成为下一个精良的程序员
