以前我们只能通过其他的截图工具来截取图像。现代浏览器的功能已经越来越强，随着h5的逐渐普及，浏览器本身就可以截图啦。html2canvas就是这样一款前端插件,它的原理是将dom节点在canvas里边画出来。虽然很方便，但有以下限制：
本文主要介绍html2canvas截图不能截取圆角图片的解决方案的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
不支持iframe
不支持跨域图片
不能在浏览器插件中使用
立即学习“前端免费学习笔记（深入）”；
部分浏览器上不支持SVG图片
不支持Flash
不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问 http://deerface.sinaapp.com/ 试试 :)
由于我的使用场景很简单,记录一下异常信息，并且异常页面也是由自己定义的，那么html2canvas 就足够使用了。
第一次用html2canvas,目的就是想把整个页面截图下来生成一张图片给用户保存
下面我们先来看看HTML渲染出来的是啥样子的
HTML渲染出来的图片可以看到上面的图片是有圆角效果的，但是当我用html2canvas来进行转换图片操作的时候，发现图片圆角效果没失效了。
变成了上面这个样子。想了很多解决方案，后来决定把后面的圆角做成一张背景图片，中间圆的部分背景透明，然后通过绝对定位覆盖到原来的图片上面，相当于是一个遮罩这种效果。
当然，遮罩图片的DOM节点必须在需要圆角图片的下面，类似于
@@##@@ @@##@@
生成出来就是正常的样子了
@@##@@ @@##@@
复制代码
代码如下:
<a href="@@##@@ src="<a href=" http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg" alt="" width="169" height="300" srcset="<a href=" http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg 169w, <a href=" http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg 377w" sizes="(max-width: 169px) 100vw, 169px" />
相关推荐：
html与CSS如何实现圆形和圆角图片格式的示例代码
php生成圆角图片代码
CSS3制作圆角图片和椭圆形图片的方法介绍
以上就是html canvas截取圆角图片的实现方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1545756.html
微信扫一扫 
支付宝扫一扫 
