this.$nextTick(() => { // 使用$nextTick，解決數據還沒有渲染到html就先轉為圖片，此時的圖片會是空內容的問題// var canvas2 = document.createElement('canvas');// const _canvas = document.getElementById('downloadCardDiv');// var w = parseInt(window.getComputedStyle(_canvas).width);// var h = parseInt(window.getComputedStyle(_canvas).height);// var w = _canvas.offsetWidth;// var h = _canvas.offsetHeight;const canvas = document.createElement('canvas') // 創建一個canvas節點const shareContent = document.getElementById('downloadCardDiv') // 需要截圖的包裹的（原生的）DOM 對象const width = shareContent.offsetWidth // 獲取dom 寬度const height = shareContent.offsetHeight // 獲取dom 高度const scale = 2 // 定義任意放大倍數 支持小數canvas.getContext('2d').scale(scale, scale) // 獲取context,設置scaleconst rect = shareContent.getBoundingClientRect() // 獲取元素相對于視口的const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 獲取滾動軸滾動的長度this_.html2canvas(document.getElementById('downloadCardDiv'), { // 轉換為圖片x: rect.left, // 繪制的dom元素相對于視口的位置y: rect.top,// scrollX: scrollTop,// 滾動的長度scrollY: -scrollTop,scale: scale, // 添加的scale 參數width: width, // dom 原始寬度height: height,useCORS: true, // 開啟跨域dpi: window.devicePixelRatio * 2}).then(canvas => {const context = canvas.getContext('2d')// 關閉抗鋸齒context.mozImageSmoothingEnabled = falsecontext.msImageSmoothingEnabled = falsecontext.imageSmoothingEnabled = falseconst imgUrl = canvas.toDataURL('image/png');this.dataURL = imgUrl;// console.log('下載圖片')var a = document.createElement('a')a.download = this.downloadCardObj.name + '邀請卡'// 設置圖片地址a.href = this.dataURL;a.click();// this.$message({message: '下載成功', showClose: true, type: 'success'});this.downloadCarVisible = false;})}) html2canvas偏移和模糊_JavaScript_weixin_30955341的博客-CSDN博客?blog.csdn.net

有疑問可以私信或者評論留言

---

補充下，本人不是大佬，只是把做項目遇到的問題總結了一下

總結

以上是生活随笔為你收集整理的html图片滚动红点_html2canvas生成的图片偏移问题的全部內容，希望文章能夠幫你解決所遇到的問題。

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