小编给大家分享一下 canvas如何截取圆角图片，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
不支持iframe
不支持跨域图片
不能在浏览器插件中使用
部分浏览器上不支持SVG图片
不支持Flash
不支持古代浏览器和IE，如果你想确认是否支持某个浏览器，可以用它访问http://deerface.sinaapp.com/试试:)
由于我的使用场景很简单,记录一下异常信息，并且异常页面也是由自己定义的，那么html2canvas就足够使用了。
第一次用html2canvas,目的就是想把整个页面截图下来生成一张图片给用户保存
下面我们先来看看HTML渲染出来的是啥样子的
HTML渲染出来的图片可以看到上面的图片是有圆角效果的，但是当我用html2canvas来进行转换图片操作的时候，发现图片圆角效果没失效了。
变成了上面这个样子。想了很多解决方案，后来决定把后面的圆角做成一张背景图片，中间圆的部分背景透明，然后通过绝对定位覆盖到原来的图片上面，相当于是一个遮罩这种效果。
当然，遮罩图片的DOM节点必须在需要圆角图片的下面，类似于
<pclass="avatar_imgfl"><pclass="avatar_imgfl">
<imgsrc=""id="you"class="avatar_ppfl"/><!–需要圆角的原始图片–>
<imgsrc="/template/images/avatar.png"class="img-responsive"style="position:absolute;"><!–遮罩图片–>
</p>
生成出来就是正常的样子了
<pclass="avatar_imgfl"><pclass="avatar_imgfl">
<imgsrc=""id="you"class="avatar_ppfl"/><!–需要圆角的原始图片–>
<imgsrc="/template/images/avatar.png"class="img-responsive"style="position:absolute;"><!–遮罩图片–>
</p>
代码如下:
<ahref="<ahref="
<img">http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg"><img</a>
src="<ahref="
http://www.teaxia.com/wp-content/uploads/2018/01/2-169×300.jpg</a>"alt=""width="169"height="300"
srcset="<ahref="
http://www.teaxia.com/wp-content/uploads/2018/01/2-169×300.jpg</a>169w,
<ahref="
http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg</a>377w"
sizes="(max-width:169px)100vw,169px"/></a>
以上是“ canvas如何截取圆角图片”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注云搜网行业资讯频道！
