0

だから、cssを使ったhtml2canvasの悪い仕事について知っています。誰かが私が最善の解決策を見つけるのを手伝ってくれるかもしれません。要素を含むマップのスクリーンショットを作成する必要があります。スクリーンショットの後、私は画像を取得しますが、かなり見栄えがしますが、html ではマップのすべての要素 (パネル、ボタン) が失われ、すべての css クラスと画像が表示されません。

だから、私がしようとしていたこと: js/jquery; でマップの div をリロードします。スタイルシートをリロードします。css クラスを「myFile.css」から html に移動します。

私はそれが私にとって役に立たないと思います。

cssText を要素のスタイル属性に移動しようとすると、うまくいきましたが、div と彼の子供の悪い考えからすべての要素を取得して書き直すと思います。

4

1 に答える 1

3

問題は、写真が svg であり、XMLSerializer() を使用する必要があり、primeFaces のレイアウトで html2canvas がうまく機能しない場合があることです。私のために働いています：

//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 に答える