关于 vue 中使用html2canvas 遇到报错（ Element is not attached to a Document）

最新推荐文章于 2025-04-01 11:52:10 发布

小小前端.

最新推荐文章于 2025-04-01 11:52:10 发布

阅读量7.9k

点赞数 4

文章标签：前端 html5 javascript

本文链接：https://blog.csdn.net/qq_44726587/article/details/126181047

版权

在使用html2canvas生成图片的时候，有时候会报这个错Element is not attached to a Document，这是先把标签换成原

生的标签例如div，如果不行再把获取的元素用id获取，不用ref。宽高可以自己设置，

 let id = window.document.getElementById(val + i)
          // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
          html2canvas(id, {
            width: ww, //截图宽度
            height: hh, //截图高度
            backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
            useCORS: true, //支持图片跨域
            scale: 1, //设置放大的倍数
          }).then((canvas) => {
            // 把生成的base64位图片上传到服务器,生成在线图片地址
            let url = canvas.toDataURL("image/jpg", 0.1); // toDataURL: 图片格式转成 base64
            that.imgSrc = url;
            //   console.log('6666666666', url);
           

          });