背景：
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次调用方法，才能保证图片正确生成
参考：iOS需要二次调用方法才能保证正确生成图片
Ⅳ、html-to-image
同上
目前使用的方案是：
Android:html2canvas-objectfit-fix
function creatImg(){
return new Promise((resolve, reject)=>{
html2canvas(document.getElementById("div-id"), { // div-id为被截图节点id
preserveDrawingBuffer:false,
allowTaint: false,
useCORS: true, // 支持跨域图片的截取，不然图片截取不出来
// 图片服务器配置 Access-Control-Allow-Origin: *
}).then(canvas => {
const shareBae64 = canvas.toDataURL();
resolve(shareBae64);
}).catch(error=>{
reject(error);
});
});
}
iOS:dom-to-image
function drawImg() { //取 div-id 父标签div-parent-id，生成的图片有白边，但还看的过去
return new Promise((resolve, reject)=>{
domtoimage.toPng(document.getElementById("div-parent-id"),{ // div-parent-id为被截图节点id的父标签id
preserveDrawingBuffer:false,
allowTaint: false,
useCORS: true, // 支持跨域图片的截取，不然图片截取不出来
// 图片服务器配置 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, // 支持跨域图片的截取，不然图片截取不出来
// 图片服务器配置 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在苹果手机上不调用问题
2、在需要截图的div 的样式中增加了对字体的设置
font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei', SimHei;//根节点增加字体设置，避免iOS 15生成图片失败
