之前我們有toB的海報截屏需求储笑，都使用了node截圖，最近有toC的需求圆恤，訪問量大突倍，用node直接掛了，調(diào)研了下改成html2canvas，結(jié)果入坑一時爽赘方，填坑火葬場烧颖。記錄下弱左，希望可以幫助出現(xiàn)同樣問題的坑主窄陡！官方地址：http://html2canvas.hertzen.com/
問題1：沒法截取陰影
解決：我頁面的陰影可以用層疊div取代，所以沒有改源代碼拆火，可以看下面這個鏈接的解決方法跳夭。https://blog.csdn.net/SDUST_JSJ/article/details/78122610
問題2：截屏底部出現(xiàn)1px的白邊
解決：動態(tài)設(shè)置了height為截屏內(nèi)容的高度，但是偶有機(jī)型還是會出現(xiàn)们镜，最終解決方法币叹，height設(shè)置比實際小1px即可；
問題3: 截屏不清晰問題
解決：設(shè)置scal:3,非常清晰 問題4模狭、圖片跨域問題 設(shè)置useCORS: true
問題4: ios13.+ iphone8會出現(xiàn)html2canvas()不執(zhí)行不報錯颈抚，then和catch都不執(zhí)行，直接中斷的問題嚼鹉。
回退版本到1.0.0-rc4.如果回退還不可以贩汉，可以參考https://github.com/FEA-Dven/html2Canvas
代碼：
let html2canvas;
if (IS_CLIENT) {
html2canvas = require('html2canvas/dist/html2canvas');
}
const targetDom = document.querySelector('.poster');
(window.html2canvas || html2canvas)(targetDom, {
useCORS: true,
scale: 3,
height: targetDom.offsetHeight - 2,
width: targetDom.offsetWidth,
windowWidth: document.body.scrollWidth,
windowHeight: document.body.scrollHeight,
}).then((canvas) => {
const base64Img = canvas.toDataURL('image/png');
const img = base64Img.replace(/^data:image/\w+;base64,/, '');
this.props.base64Func && this.props.base64Func(img);
}).catch(err => console.log(err));
