使用html2canvas 异常情况处理 （2020-09-17）

[yaogengzhu]

使用html2canvas 异常情况处理

• 问题1， 不能使用背景图 （使用div包裹一层）

  • 最好使用定位处理一些dom, css, -- html2处理会出现失效的情况

  <div>
    <img />
  </div>
  

• 图片模糊问题、 图片不显示（图片跨越问题）

  const canvasHtml = document.getElementById('wxShareCanvas')
  if (canvasHtml) {
    var opts = {
      scale:2, // 添加的scale 参数，解决字体模糊的情况
      logging: true, //日志开关
      useCORS: true, // 解决图片因为跨域问题不能被正常渲染。
      dpi: window.devicePixelRatio * 2,
    }
    html2canvas(canvasHtml, opts).then(canvas => {
      const dataURL = canvas.toDataURL("image/jpeg", 1.0)
      console.log('dataURL :>> ', dataURL)
      // 以下方法为客户端方法！保存图片到相册
      JsBridge.invokeMethod('saveImage', {
        base64: dataURL
      }, (data: any) => {
        const status = data.status
        console.log('status :>> ', status)
        dialog.pop()
        if (status === 'success') {
          openToast(MessageType.success, '保存成功')
          setSave(true)
        } else {
          openMessage(MessageType.error, '保存失败，请打开应用图片权限')
          setSave(true)
        }
  
      })
    })
  

[yaogengzhu]

封装了一个API

/**
 * 用于生成海报
 * @param id dom-id
 */
export const createCannvasToGetBase64Img = (id: string, cb: (data: string) => void) => {
    const canvasHtml = document.getElementById(id)
    if (canvasHtml) {
        const opts = {
            scale: 2, // 添加的scale 参数
            logging: true, // 日志开关
            useCORS: true,
            dpi: window.devicePixelRatio * 2,
            backgroundColor: '#ffffff'
        }
        html2canvas(canvasHtml, opts).then(canvas => {
            const dataURL = canvas.toDataURL("image/jpeg", 1.0)
            cb(dataURL)
        })
    }
}