本文主要介紹html2canvas截圖不能截取圓角圖片的解決方案的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，希望能幫助到大家。

• 不支持iframe

• 不支持跨域圖片

• 不能在瀏覽器插件中使用

• 部分瀏覽器上不支持SVG圖片

• 不支持Flash

• 不支持古代瀏覽器和IE，如果你想確認(rèn)是否支持某個(gè)瀏覽器，可以用它訪問(wèn) http://deerface.sinaapp.com/ 試試 :)

由于我的使用場(chǎng)景很簡(jiǎn)單,記錄一下異常信息，并且異常頁(yè)面也是由自己定義的，那么html2canvas 就足夠使用了。

第一次用html2canvas,目的就是想把整個(gè)頁(yè)面截圖下來(lái)生成一張圖片給用戶保存

下面我們先來(lái)看看HTML渲染出來(lái)的是啥樣子的

HTML渲染出來(lái)的圖片可以看到上面的圖片是有圓角效果的，但是當(dāng)我用html2canvas來(lái)進(jìn)行轉(zhuǎn)換圖片操作的時(shí)候，發(fā)現(xiàn)圖片圓角效果沒(méi)失效了。

變成了上面這個(gè)樣子。想了很多解決方案，后來(lái)決定把后面的圓角做成一張背景圖片，中間圓的部分背景透明，然后通過(guò)絕對(duì)定位覆蓋到原來(lái)的圖片上面，相當(dāng)于是一個(gè)遮罩這種效果。

當(dāng)然，遮罩圖片的DOM節(jié)點(diǎn)必須在需要圓角圖片的下面，類似于

<p class="avatar_img fl"><p class="avatar_img fl"> 
     <img src="" id="you" class="avatar_pp fl" /><!--需要圓角的原始圖片-->
     <img src="/template/images/avatar.png" class="img-responsive" style="position: absolute;"><!--遮罩圖片-->
</p>

生成出來(lái)就是正常的樣子了

<p class="avatar_img fl"><p class="avatar_img fl"> 
     <img src="" id="you" class="avatar_pp fl" /><!--需要圓角的原始圖片-->
     <img src="/template/images/avatar.png" class="img-responsive" style="position: absolute;"><!--遮罩圖片-->
</p>

復(fù)制代碼

代碼如下:

<a href="<a href=" 
<img">http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg"><img</a> 
src="<a href=" 
http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg</a>" alt="" width="169" height="300" 
srcset="<a href=" 
http://www.teaxia.com/wp-content/uploads/2018/01/2-169x300.jpg</a> 169w, 
<a href=" 
http://www.teaxia.com/wp-content/uploads/2018/01/2.jpg</a> 377w" 
sizes="(max-width: 169px) 100vw, 169px" /></a>

相關(guān)推薦：

html與CSS如何實(shí)現(xiàn)圓形和圓角圖片格式的示例代碼

php生成圓角圖片代碼

CSS3制作圓角圖片和橢圓形圖片的方法介紹

以上就是html canvas截取圓角圖片的實(shí)現(xiàn)方法的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！