html2canvas截图不能截取圆角图片的解决方案。

第一次用html2canvas,目的就是想把整个页面截图下来生成一张图片给用户保存

下面我们先来看看HTML渲染出来的是啥样子的

HTML渲染出来的图片可以看到上面的图片是有圆角效果的，但是当我用html2canvas来进行转换图片操作的时候，发现图片圆角效果没失效了。

变成了上面这个样子。想了很多解决方案，后来决定把后面的圆角做成一张背景图片，中间圆的部分背景透明，然后通过绝对定位覆盖到原来的图片上面，相当于是一个遮罩这种效果。

当然，遮罩图片的DOM节点必须在需要圆角图片的下面，类似于

<div class="avatar_img fl"><div class="avatar_img fl"> 
     <img src="" id="you" class="avatar_pp fl" /><!--需要圆角的原始图片-->
     <img src="/template/images/avatar.png" class="img-responsive" style="position: absolute;"><!--遮罩图片-->
</div>
生成出来就是正常的样子了