尝试找到最好的解决方案，使OpenLayers地图截图使用html2canvas.地图元素丢失css类，图像不被查看

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

本文关键字：地图 元素 css 图像 html2canvas OpenLayers 解决方案      更新时间：2023-09-26

所以，我知道关于html2canvas与css的坏工作。也许有人能帮我找到最好的解决办法。我需要使地图截图与元素。截图后，我会得到一个图像，看起来很好，但在html中所有元素(面板，按钮)的地图失去所有css类和图像不查看。

所以，我在尝试什么:通过js/jquery重载地图的div;重新加载样式表;把css类从"myFile.css"移到html;

我认为那对我没用。

一旦我试图移动cssText元素的样式属性，它工作得很好，但我认为从div和他的孩子获得和重写所有元素坏主意。

问题是图片是svg，有必要使用XMLSerializer()，我认为有时html2canvas不好与primeFaces的布局工作，所以如果你有css的问题，由importNode修复。为我工作:

//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);
    }
});
}

你会发现画布在这里:https://github.com/gabelerner/canvg

你可以在这里找到html2canvas: http://html2canvas.hertzen.com/

相关文章：