javascript - 尝试找到使用 html2canvas 制作 OpenLayers map 屏幕截图的最佳解决方案。 map 元素丢失 css 类，图像无法查看

Question

所以，我知道 html2canvas 与 css 的糟糕工作。也许有人可以帮助我找到最佳解决方案。 我需要用元素制作 map 截图。截屏后我会得到一张图片，看起来不错，但在 html 中， map 的所有元素(面板、按钮)都丢失了所有 css 类和图片，无法查看。

所以，我正在尝试的是: 通过 js/jquery 重新加载 map 的 div；重新加载样式表；将 css 类从“myFile.css”移动到 html；

我认为这对我没用。

一旦我尝试将 cssText 移动到元素的样式属性，并且效果很好，但我认为从 div 和他的 child 的坏主意中获取并重写所有元素。

Answer 1

问题是图片是 svg，必须使用 XMLSerializer()，而且我认为有时 html2canvas 无法与 primeFaces 的布局一起使用，所以如果您遇到由 importNode 修复的 css 问题。为我工作:

//don't forget to declare all js libs and files on html page

//targetElem - id of map, like a $('#map')
function screenshotMap(targetElem) {

var nodesToRecover = [];
var svgElem = targetElem.find('svg');
var serializer = new XMLSerializer();

//screenshotAreaId - north layoutUnit of layout this variable need for                    
//"update" north layoutUnit
var oldNode = document.getElementById("screenshotAreaId");

//convert all svg's to canvas, filling an arrays for turn back canvas to svg
svgElem.each(function (index, node) {

    var parentNode = node.parentNode;
    //skip nested svg's in "parent" svg, canvg will handle "parent"
    if(parentNode.tagName != 'DIV'){
    return true;
    }
    var canvas = document.createElement('canvas');
    var svg = parentNode.querySelector('svg');
    var svgString = serializer.serializeToString(svg);

    //canvg lib
    canvg(canvas, svgString);

    nodesToRecover.push({
        parent: parentNode,
        child: node
    });

    parentNode.removeChild(node);
    parentNode.appendChild(canvas);
});

//html2canvas lib, "screenshot map" download file
html2canvas(targetElem, {
    onrendered: function (canvas) {
        var img = canvas.toDataURL('image/png').replace("image/png",  "image/octet-stream");
        window.location.href = img;

        //removing canvas, turn back svg's
        var canvasElem = targetElem.find('canvas');
        canvasElem.each(function (index, node) {
            var parentNode = node.parentNode;
            parentNode.removeChild(node);
            parentNode.appendChild(nodesToRecover[index].child);
        });

        //"update" layoutUnit if you have problems with css
        var newNode = document.importNode(oldNode, true);
        document.getElementById("layout").appendChild(newNode);
    }
});
}

您会在这里找到 canvg:https://github.com/gabelerner/canvg

您会在这里找到 html2canvas:http://html2canvas.hertzen.com/