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

Question

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

所以，我正在尝试的是：通过 js/jquery 重新加载地图 div；重新加载样式表；将 css 类从 "myFile.css" 移动到 html;

我觉得对我没用。

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

Answer 1

问题是图片是 svg，必须使用 XMLSerializer()，而且我认为有时 html2canvas 无法与 primeFaces 的布局一起使用，所以如果您对 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/

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

Try find best solution to make OpenLayers map screenshot using html2canvas. The map elements losing css classes, images don't viewed

javascript

css

jquery

html2canvas

canvg