canvas 实现电子签名(兼容横竖屏切换)、html2canvas

  • canvas 实现电子签名
    坑点:不能直接在css中设置canvaswidth, height,否则画布中鼠标定位不准
    代码如下:





  • html2canvas
    坑点:
    1. 若图片跨域,则截图空白,解决方案:图片服务器设置允许跨域,图片渲染设置跨域
    2. 若页面有滚动条,则截图不全,解决方案:用一个div维护需要转canvasdom,触发下载时让页面回到顶部,下载完再回到相应位置(如底部:window.scrollBy(0, document.body.scrollHeight)
              getBase64() {
                  window.pageYOffset = 0
                  html2canvas(document.getElementById('declaration'), {
                      scale: 1,
                      allowTaint: false,
                      taintTest: false,
                      useCORS: true,
                      height: document.getElementById('declaration').clientHeight
                  }).then((canvas)=> {
                      console.log(canvas.toDataURL('image/png', 1))
                  });
            },
    

你可能感兴趣的:(canvas 实现电子签名(兼容横竖屏切换)、html2canvas)