htmlcanvas如何实现截取圆角图片的功能-创新互联
小编给大家分享一下html canvas如何实现截取圆角图片的功能,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!
创新互联建站2013年至今,先为邹平等服务建站,邹平等地企业,进行企业商务咨询服务。为邹平企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强,随着H5的逐渐普及,浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来。虽然很方便,但有以下限制:
本文主要介绍html2canvas截图不能截取圆角图片的解决方案的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。
不支持iframe
不支持跨域图片
不能在浏览器插件中使用
部分浏览器上不支持SVG图片
不支持Flash
不支持古代浏览器和IE,如果你想确认是否支持某个浏览器,可以用它访问 http://deerface.sinaapp.com/ 试试 :)
由于我的使用场景很简单,记录一下异常信息,并且异常页面也是由自己定义的,那么html2canvas 就足够使用了。
第一次用html2canvas,目的就是想把整个页面截图下来生成一张图片给用户保存
下面我们先来看看HTML渲染出来的是啥样子的
HTML渲染出来的图片可以看到上面的图片是有圆角效果的,但是当我用html2canvas来进行转换图片操作的时候,发现图片圆角效果没失效了。
变成了上面这个样子。想了很多解决方案,后来决定把后面的圆角做成一张背景图片,中间圆的部分背景透明,然后通过绝对定位覆盖到原来的图片上面,相当于是一个遮罩这种效果。
当然,遮罩图片的DOM节点必须在需要圆角图片的下面,类似于
生成出来就是正常的样子了
复制代码
代码如下:
http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg"> src=" 169w,
看完了这篇文章,相信你对html canvas如何实现截取圆角图片的功能有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站名称:htmlcanvas如何实现截取圆角图片的功能-创新互联
当前地址:http://scyanting.com/article/hgjsp.html