0

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

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

我觉得这对我没用。

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

4

1 回答 1

3

问题是图片是 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/

于 2015-09-21T17:36:02.040 回答