Javascript如何实现网页截屏?这篇文章运用了实例代码展示,代码非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
目前成都创新互联已为上千的企业提供了网站建设、域名、网络空间、成都网站托管、企业网站设计、杭锦网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
技术路线很清晰,将网页的某个区域的内容生成图像,保持到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: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
这段代码写的非常清楚,只需要依据它做稍微的修改就能适应自己的需求。
到此为止, 关于Javascript实现网页截屏的方法有了一个基础的认识, 但是对于具体的使用方法还是需要多加巩固和练习,如果想了解更多相关内容,请关注创新互联行业资讯。
分享标题:Javascript如何实现网页截屏
标题网址:https://www.cdcxhl.com/article14/jgpede.html
成都网站建设公司_创新互联,为您提供网站内链、品牌网站建设、静态网站、关键词优化、、Google
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联