項(xiàng)目中需要在微信中生成海報(bào)圖，用戶(hù)長(zhǎng)按海報(bào)圖后可以將圖片發(fā)送給微信好友或保存到本地争舞；
海報(bào)圖在前端使用html2canvas 1.0.0-rc5生成，布局先使用一個(gè)高度為0并添加overflow: hidden的div作為外部容器豆胸，并將需要繪制的dom作為子元素放進(jìn)去常柄，實(shí)現(xiàn)繪制dom對(duì)用戶(hù)不可見(jiàn)，大致代碼如下：
<div style="height: 0;overflow: hidden;">
<div ref="canvasDiv">
待繪圖的DOM
</div>
</div>
html2canvas代碼如下：
html2canvas(this.$refs.canvasDiv, {
imageTimeout: 0,
allowTaint: true,
useCORS: true
}).then((canvas) => {
let png = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
this.img = png.src
})
問(wèn)題
上面的代碼摇予，在PC和安卓上運(yùn)行沒(méi)有任何問(wèn)題汽绢，但是在IOS上，會(huì)出現(xiàn)繪制的圖片白屏侧戴；
解決：
1：先替換html2canvas版本為1.0.0-rc3
2：在使用html2canvas方法繪圖前宁昭，添加 window.scrollTo(5, 0)
window.scrollTo(5, 0)
html2canvas(this.$refs.canvasDiv, {
imageTimeout: 0,
allowTaint: true,
useCORS: true,
x: 0, // 因?yàn)樯厦媸褂脀indow.scrollTo方法將頁(yè)面向右滾動(dòng)了5px，所以需要通過(guò)該設(shè)置來(lái)防止生成的圖片左邊出現(xiàn)白邊
}).then((canvas) => {
let png = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
this.img = png.src
})
總結(jié)：
這個(gè)問(wèn)題個(gè)人覺(jué)得是一個(gè)很奇葩的問(wèn)題酗宋，為什么通過(guò)設(shè)置滾動(dòng)可以修復(fù)這個(gè)BUG也完全不清楚积仗，網(wǎng)絡(luò)上看各位大佬解決都是將滾動(dòng)設(shè)置為0，而我這兒卻是需要設(shè)置為非0
如果有哪位大佬知道原因蜕猫，還請(qǐng)留言告知一下
