php抓取网页title(如何将canvas图形转换成图片和下载canvas图像的javascript工具)

　　php抓取网页title(如何将canvas图形转换成图片和下载canvas图像的javascript工具)

　　之前写过如何将canvas图形转为图片和下载canvas图片，都是为这个插件做的技术准备。

　　技术路线非常清晰。将网页某个区域的内容生成一张图片，保存在canvas中，然后将canvas内容转换成图片，保存在本地，最后上传到微博。

　　我在网上搜索，找到了 html2canvas，这是一个 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作为参数传入。

　　最终没有选择js工具html2canvas，因为我在实验中发现了几个问题。

　　一是跨域问题。让我举一个例子来说明这个问题。比如我的网页网址是，我在这个页面上有一张图片。这张图片不是来自域，而是来自CDN图片服务器。那么，这个图片和这个网页就不一样了。在同一个域中，那么 html2canvas 不能对这种图片进行截图。如果你的 网站 的所有图片都放在一个单独的图片服务器上，那么使用 html2canvas 截取整个网页的截图就是所有图片的位置。都是空白。

　　这个问题还有一个补救办法，就是使用代理：

         html2canvas php proxy

         //

         <p>

 </p>

　　这种方法只能在自己的服务器上使用，如果是截图别人的网页，还是不行。

　　在实验过程中，还发现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 方法看起来很完美，正是我需要的，但是这个方法不能在普通网页中使用，因为 Firefox 官方发现这个方法会造成安全漏洞，直到这个 bug 被修复，只有用“Chrome 权限”的代码来使用这个 drawWindow() 函数。

　　虽然有很大的限制，但在遇到挫折后仍然可以使用。在我开发的 Firefox 插件中，main.js 是具有“Chrome 权限”的代码。我在网上找到了一个Firefox插件SDK的代码示例：

　　 var window = require(&#39;window/utils&#39;).getMostRecentBrowserWindow();

 var tab = require(&#39;tabs/utils&#39;).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:9

 thumbnail.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

　　这段代码写得很清楚，你只需要稍微修改一下就可以满足你的需要。

　　这里的小编是一位有10年工作经验的前端高级工程师。关于web前端的技术干货很多，包括但不限于各大厂最新面试题系列、前端项目、最新前端路线等。需要伙伴可以私信我

　　发送【前端信息】

　　您可以获取取货地址并免费发送给所有人。如果你有任何关于学习web前端的问题（学习方法、学习效率、如何就业），都可以问我。希望你也可以通过自己的努力，成为下一个优秀的程序员。