項(xiàng)目場(chǎng)景：

PC項(xiàng)目中，點(diǎn)擊按鈕，由頁面轉(zhuǎn)成海報(bào)功能，利用html2canvas將dom元素轉(zhuǎn)成圖片，然后可以進(jìn)行右鍵圖片另存為，還可以進(jìn)行手動(dòng)點(diǎn)擊下載海報(bào)

---

問題描述

頁面正常展示，當(dāng)html2canvas轉(zhuǎn)為圖片后，文字全部疊加到了一起

html2canvas(document.getElementById("posterThumbnail"), {allowTaint: true,//允許跨域圖片，這邊要與后端協(xié)商，允許圖片跨域訪問？？useCORS: true,//允許訪問服務(wù)器圖片，支持跨域}).then(function(canvas) {const url = canvas.toDataURL('image/png');// base64數(shù)據(jù)var image = new Image();image.src = url;image.style.width = '375px';image.style.height = '800px';let posterMain = document.getElementById("publicCoursePoster");posterThumbnail.style.display = 'none';//頁面隱藏，圖片顯示posterMain.appendChild(image);})

---

原因分析：

由于需要屏幕適應(yīng)海報(bào)，復(fù)用的是h5的頁面，最外層的div使用了transform: scale(0.8)進(jìn)行等比縮小，html2canvas對(duì)scale不兼容，捕獲屏幕快照的時(shí)候文字疊加在一起

---

解決方案：

去掉transform：scale這個(gè)屬性，生成的圖片就正確了

總結(jié)

以上是生活随笔為你收集整理的html2canvas页面转为图片遇到的坑：文字叠加到一起的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。