前端框架
您所在的位置:封程中个人博客 > 前端开发 > 前端框架 >

使用html2canvas对网页DOM进行截图截屏教程

字号+ 作者:封程中 来源:封程中个人博客 2016-01-10 14:59 阅读(0) 我要评论(0)

最近公司有一个项目,有个html5界面里面,需要生成照片,然后那个照片其实是2张照片加一些图片、文字什么的组合的,所以需要对html5的某个div元素进行截屏截图。然后我们就发现...

最近公司有一个项目,有个html5界面里面,需要生成照片,然后那个照片其实是2张照片加一些图片、文字什么的组合的,所以需要对html5的某个div元素进行截屏截图。然后我们就发现了html2canvas这个前端插件.

html2canvas

html2canvas可以快速对整个网页截图,也可以对网页里面的某快元素截图,比如div什么的,我们现在就刚好是要对DIV里面的元素截图,所以用这个还是挺合适的.


html2canvas下载地址:http://www.bootcdn.cn/html2canvas/


使用:



$("#saveImage").click(function() {  

                html2canvas($('#mypics'), {  

                    onrendered : function(canvas) {  

                        var myImage = canvas.toDataURL("image/jpeg");  

                       

                    }  

                });  

            });  

这里myImage拿到的就是生成后的base64,$('#mypics')就是你要生成的元素.是不是很简单。


html2canvas确实在网页截图这块很方便,也很不错,但是还是有2个局限的地方

1.存在图片跨域问题,就是如果元素里面的图片不是本地的地址,而是七牛或者网络图片,那么需要有代理操作去实现

2.对一些css3的样式不是很兼容,这也是没办法的,没有什么东西是万能的.


所以大家如果要实现的东西不是很受以上来个局限的影响,那么就可以直接选择html2canvas来实现网页截图,生成图片.

来源:(QQ号:604849147),原创文章如转载,请注明本文链接:http://fcz8k.com/webframe/508.html

 

1.如果您觉得文章帮助了您,可以点击下面的广告来支持我,谢谢!2.本站的原创文章,请转载时务必注明文章作者和来源,谢谢!3.作者投稿可能会经我们编辑修改或补充,并且会注明版权来源,谢谢!

相关文章
网友点评
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)