項目場景：

PC項目中，點擊按鈕，由頁面轉成海報功能，利用html2canvas將dom元素轉成圖片，然后可以進行右鍵圖片另存為，還可以進行手動點擊下載海報

---

問題描述

頁面正常展示，當html2canvas轉為圖片后，文字全部疊加到了一起

html2canvas(document.getElementById("posterThumbnail"), {allowTaint: true,//允許跨域圖片，這邊要與后端協商，允許圖片跨域訪問？？useCORS: true,//允許訪問服務器圖片，支持跨域}).then(function(canvas) {const url = canvas.toDataURL('image/png');// base64數據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);})

---

原因分析：

由于需要屏幕適應海報，復用的是h5的頁面，最外層的div使用了transform: scale(0.8)進行等比縮小，html2canvas對scale不兼容，捕獲屏幕快照的時候文字疊加在一起

---

解決方案：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。