javascript - html2Canvas 将页面局部转换为图片对象时，页面中的背景图片丢失是如何引起的？

Question

因为代码中音符不方便使用img标签实现 现在是使用背景图 background:url(''') 重叠的方法实现的，部分背景图如下:

但是这就导致了图片丢失的问题,页面效果如下：

但是生成图片后所有音符都不见了，输出 pdf 的效果如下：

页面转换部分的三个方法代码如下：

//点击下载按钮触发此方法，开始处理页面
    async Fun(){
      // 生成页面元素对应的数组
      let elememtImgArr=[]
      elememtImgArr.push(await htmlToPdf.getElementImg('page'))
      //根据数组生成pdf文件
      let PDF=htmlToPdf.getPdf(elememtImgArr)
      // 保存PDF文件
      PDF.save(this.title + '.pdf')
    },

    //用于将页面元素转换为图片数据
    async getElementImg(elementID){
        let elementImg
        await html2Canvas(document.querySelector('#'+elementID), {
            scale:2,
            dpi:1000,
            allowTaint: true,
        }).then(canvas=>{
            // canvas转图片数据
            elementImg = canvas.toDataURL('image/jpeg', 1.0)
        })
        return elementImg
    },
    //用于将图片转换为PDF文件
    getPdf(imgArr){
        // 获取数组长度
        let pageNam=imgArr.length
        // 定义文件宽度
        let imgWidth = 592.28
        // 定义文件高度
        let imgHeight = 841.89
        // 创建pdf文件对象
        let PDF = new JsPDF('p', 'pt', 'a4')

        // 遍历数组，添加到pdf文件
        imgArr.forEach((item,index)=>{
            PDF.addImage(item, 'JPEG', 0, 0, imgWidth, imgHeight,'alias'+(index+1))
            // 如果后面还有未添加的内容，则追加纸张
            if(pageNam-index>1){
                PDF.addPage()
            }
        })
        // 返回生成的文件对象
        return PDF
    }

我知道使用 img 标签不会有这个问题，但现在就是要用 background:url(''') 实现，有什么办法吗？

Answer 1

可能只是 html2canvas 的 bug，毕竟是软件都有 bug。

建议：

1. 升级依赖到最新版版本
2. 换用 puppeteer 生成截图
3. 换用有效的 html