首页 / 知识

canvas截取圆角图片的实现方法

2023-04-11 14:59:00

　　本文主要介绍html2canvas截图不能截取圆角图片的解决方案的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

　　不支持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.webp"class="img-responsive"style="position:absolute;">

　　</p>

　　生成出来就是正常的样子了

　　<pclass="avatar_imgfl"><pclass="avatar_imgfl">

<imgsrc=""id="you"class="avatar_ppfl"/>

<imgsrc="/template/images/avatar.webp"class="img-responsive"style="position:absolute;">

　　</p>

　　复制代码

　　代码如下:

　　<ahref="<ahref="

　　<img">http://www.teaxia.com/wp-content/uploads/2018/01/2.webp"><img</a>

　　src="<ahref="

　　http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.webp</a>"alt=""width="169"height="300"

　　srcset="<ahref="

　　http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.webp</a>169w,

　　<ahref="

　　http://www.teaxia.com/wp-content/uploads/2018/01/2.webp</a>377w"

　　sizes="(max-width:169px)100vw,169px"/></a>

本文转载自中文网