2022年10月13日 html2canvas iOS 失效问题

背景：
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生成图片失败

参考博文H5使用html2canvas生成海报在ios系统上不好使