HTML2Canvas使用总结

1:指定要生成的DOM元素id

2: 某些图片动态赋值src的url或者base64可能不会被立即渲染;可以设置一个定时器解决

3:可以调用次方法得到的canvas元素转一下格式 png/jpg

4: uniapp中使用时scale设定4倍移动端不模糊

5: 线上图片需要后端设置允许跨域访问

var copyDom = document.querySelector('#sxh');
      const width = copyDom.offsetWidth;
      const height = copyDom.offsetHeight;
      let scale = 4; // 设定倍数这样不会模糊
      html2canvas(copyDom, {
        width:width,
        heigth:height,
        windowHeight:height,
        windowWidth:width,
        scale:scale,
        scrollX:0,
        scrollY:0,
        y:0,
        useCORS: true,
        // allowTaint: true,
        // backgroundColor:"#2ab77d",
      }).then((canvas) => {
        var url = canvas.toDataURL("image/png", 1.0).replace("image/png","image/octet-stream");//图片地址

猜你喜欢

转载自www.cnblogs.com/qqfontofweb/p/13367219.html