在 HTML 画布上插入各种外部 div

问：

目前，我正在尝试创建地理空间地图的屏幕截图功能

下面我已经实现了将地理空间地图作为屏幕截图，因为我需要在地图顶部添加一些来自地理空间外部的 div。

        // create canvas
        const layoutCanvas = document.createElement("canvas");
        const context = layoutCanvas.getContext("2d");
        layoutCanvas.height = imageData.height;
        layoutCanvas.width = imageData.width;

        // add the image to the canvas
        context.putImageData(imageData, 0, 0);

        //Capture Top Layout
        const captureElement = document.getElementById('viewDiv')
        html2canvas(captureElement, { allowTaint: true })
            .then(canvas => {
                canvas.style.display = 'none'

                const p2 = new Promise((resolve, reject) => {

                    //Find all External divs
                    var divs = document.getElementsByClassName('jBox-wrapper');
                    var processCount = 0;
                    for (var i = 0; i < divs.length; i++) {
                        if (divs[i].getAttribute('class').includes('jBox-wrapper')) {
                            //console.log(divs[i].outerHTML);
                            pinArea = divs[i].getBoundingClientRect();
                            

                            var data = 'data:image/svg+xml,' +
                                encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><foreignObject width="100%" height="100%"><div xmlns="http://www.w3.org/1999/xhtml">' + divs[i].outerHTML + '</div></foreignObject></svg>')

                            const tempImg = document.createElement('img')
                            tempImg.src = data;
                            console.log(tempImg.src)
                            tempImg.onload = function () {
                                context.drawImage(tempImg, pinArea.x, pinArea.y);
                                processCount++;
                                if (processCount == divs.length) {
                                    resolve("Success!");
                                }
                            }

                        }
                    }

                    
                })

                p2.then((value) => {
                    if (value == "Success!") {
                        document.body.appendChild(canvas)
                        console.log(canvas)
                        return canvas
                    }
                })                    
            })
            .then(canvas => {
                //context.drawImage(canvas, 0, 0);

                const image1 = layoutCanvas.toDataURL('image/png');
                const a1 = document.createElement('a')
                a1.setAttribute('download', fileName)
                a1.setAttribute('href', image1)
                a1.click()
                layoutCanvas.remove()
            })

除外部 div 外，基本屏幕截图功能正在工作。

有问题的逻辑在 Promise p2 中。我可以以这种方式添加外部 div 还是需要另一种方法。

任何帮助都会很棒。谢谢。