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

Question

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

下面我已经实现了将地理空间地图作为屏幕截图，因为我需要在地图顶部添加来自地理空间外部的一些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 还是需要其他方法。

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

Answer 1

如果没有看到相应的 HTML 和 CSS，就不可能想出最好的解决方案。

因为看起来您正在使用 html2canvas，所以我建议您利用该库，并且只使用包含地理元素 (

viewDiv

) 和任何额外 div (

jBox-wrapper

) 的元素。就像...

<div id="screenshotContainer">
   <div id="viewDiv"> <!-- whatever goes here --> </div>
   <div id="wrappers"> <!-- jBox-wrapper elements --> </div>
</div>

然后...

html2canvas(document.getElementById('screenshotContainer')).then( /* etc. */);

您甚至可以在单独的 div 中动态构建这种结构，即使您由于某种原因无法更改原始 HTML。

您来自 https://stackoverflow.com/a/53067267 的替代方法（使用 HTML+CSS --> SVG --> Canvas 制作图像）可以工作，但它要求您可以轻松获取相关的CSS 也一样，并将其包含在您的 SVG XHTML 主体中。这看起来有点复杂。