首页 > Web开发 > 详细

HTML2Canvas使用总结

时间:2020-07-23 21:54:53      阅读:67      评论:0      收藏:0      [点我收藏+]

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");//图片地址

 

HTML2Canvas使用总结

原文:https://www.cnblogs.com/qqfontofweb/p/13367219.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!