背景：
react 插件項目里有一個需求：將組件合成海報场绿，然后微信分享颜启。合成圖片的方案前后嘗試過html2canvas脏里、html2canvas-objectfit-fix踩麦、dom-to-image壳猜、html-to-image四個框架勾徽。
Ⅰ、html2canvas
問題點：
1统扳、支持Android平臺捂蕴，iOS平臺運行報錯
2譬涡、Andorid平臺生成的圖片模糊，且有壓縮的情況
3啥辨、不支持object-fit樣式
Ⅱ涡匀、html2canvas-objectfit-fix
問題點：
1、支持Android平臺溉知，iOS平臺運行報錯
Ⅲ陨瘩、dom-to-image
問題點：
1、支持Andorid平臺但生成的圖片有模糊且级乍，上下壓縮的情況
2舌劳、支持iOS平臺，但圖片會有點模糊
3玫荣、iOS需要2次調(diào)用方法甚淡，才能保證圖片正確生成
參考：iOS需要二次調(diào)用方法才能保證正確生成圖片
Ⅳ、html-to-image
同上
目前使用的方案是：
Android:html2canvas-objectfit-fix
function creatImg(){
return new Promise((resolve, reject)=>{
html2canvas(document.getElementById("div-id"), { // div-id為被截圖節(jié)點id
preserveDrawingBuffer:false,
allowTaint: false,
useCORS: true, // 支持跨域圖片的截取捅厂，不然圖片截取不出來
// 圖片服務(wù)器配置 Access-Control-Allow-Origin: *
}).then(canvas => {
const shareBae64 = canvas.toDataURL();
resolve(shareBae64);
}).catch(error=>{
reject(error);
});
});
}
iOS:dom-to-image
function drawImg() { //取 div-id 父標(biāo)簽div-parent-id贯卦，生成的圖片有白邊，但還看的過去
return new Promise((resolve, reject)=>{
domtoimage.toPng(document.getElementById("div-parent-id"),{ // div-parent-id為被截圖節(jié)點id的父標(biāo)簽id
preserveDrawingBuffer:false,
allowTaint: false,
useCORS: true, // 支持跨域圖片的截取焙贷，不然圖片截取不出來
// 圖片服務(wù)器配置 Access-Control-Allow-Origin: *
})
.then(function (dataUrl) {
resolve(new Promise((resolve, reject)=>{
domtoimage.toPng(document.getElementById("div-parent-id"),{
preserveDrawingBuffer:false,
allowTaint: false,
useCORS: true, // 支持跨域圖片的截取撵割，不然圖片截取不出來
// 圖片服務(wù)器配置 Access-Control-Allow-Origin: *
})
.then(function (dataUrl2) {
const shareBae64 = dataUrl2;
resolve(shareBae64);
}).catch(error=>{
reject(error);
});
}));
}).catch(error=>{
reject(error);
});
});
}
另外iOS還額外做了以下2個變更
1、html2canvas 回退到 "html2canvas": "^1.0.0-rc.4",
參考博文html2canvas蘋果不顯示圖片,解決html2canvas在蘋果手機上不調(diào)用問題
2辙芍、在需要截圖的div 的樣式中增加了對字體的設(shè)置
font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei', SimHei;//根節(jié)點增加字體設(shè)置啡彬，避免iOS 15生成圖片失敗
