html-und Svg-Leinwand, javascript

<div id="Contents">
<div style="float:left;margin-left:10px;">
<svg></svg>
</div>
<div style="float:left;margin-left:10px;">
<svg></svg>
</div>
</div>

Dies ist mein html-code. Ich will es konvertieren Leinwand Bild.

html2canvas($("#Contents"), {
  onrendered: function(canvas) {
   window.open(canvas.toDataURL());

  }
});

Benutze ich html2canvas plugin zum konvertieren Sie es, um Bild, aber Es zeigt nicht svg.
Ich lösen Konvertierung von svg-tp Leinwand, aber jetzt html2canvas nicht arbeiten

  var $to=$("#MainContents").clone();

            $($to).children(".box").each(function() {
    var svg = ResizeArray[$(this).children(".box-content").children().attr("new-id")-1].svg();
            var Thiscanvas = document.createElement("canvas");
            Thiscanvas.setAttribute("style", "height:" + 100 + "px;width:" + 100+ "px;");

            canvg(Thiscanvas, svg);

            $(this).append(Thiscanvas);

        });
        html2canvas($($to), {
      onrendered: function(canvasq) {
        var w=window.open(canvasq.toDataURL());
        w.print();
      }
    });

Kann ich umwandeln svg auf die Leinwand, aber html2canvas-Funktion funktioniert nicht.

InformationsquelleAutor user2622044 | 2013-08-16
  1. 8

    Müssen Sie canvg Bibliothek für das zeichnen von svg zu einer temporären Leinwand und dann entfernen, die Leinwand sobald Sie den screenshot mit html2canvas.

    Hier ist der link für canvg : https://github.com/canvg/canvg

    Versuchen Sie dies:

    //find all svg elements in $container
//$container is the jQuery object of the div that you need to convert to image. This div may contain highcharts along with other child divs, etc
var svgElements= $container.find('svg');

//replace all svgs with a temp canvas
svgElements.each(function () {
    var canvas, xml;

    canvas = document.createElement("canvas");
    canvas.className = "screenShotTempCanvas";
    //convert SVG into a XML string
    xml = (new XMLSerializer()).serializeToString(this);

    //Removing the name space as IE throws an error
    xml = xml.replace(/xmlns=\"http:\/\/www\.w3\.org\/2000\/svg\"/, '');

    //draw the SVG onto a canvas
    canvg(canvas, xml);
    $(canvas).insertAfter(this);
    //hide the SVG element
    this.className = "tempHide";
    $(this).hide();
});

//...
//HERE GOES YOUR CODE FOR HTML2CANVAS SCREENSHOT
//...

//After your image is generated revert the temporary changes
$container.find('.screenShotTempCanvas').remove();
$container.find('.tempHide').show().removeClass('tempHide');
    InformationsquelleAutor shinobi
  2. 3

    Als html2canvas nicht nehmen, svg-Elemente, die Sie brauchen, um zu konvertieren alle svg-Elemente auf die Leinwand, bevor der Aufruf der html2canvas Methode. Sie konnte die canvg Bibliothek zu konvertieren alle svg auf die Leinwand. Übergeben Sie das jquery-Objekt(der braucht zum konvertieren von svg auf Leinwand, kann auch ein übergeordnetes element), um die folgende Methode:

    function svgToCanvas (targetElem) {
var nodesToRecover = [];
var nodesToRemove = [];

var svgElem = targetElem.find('svg');

svgElem.each(function(index, node) {
    var parentNode = node.parentNode;
    var svg = parentNode.innerHTML;

    var canvas = document.createElement('canvas');

    canvg(canvas, svg);

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

    nodesToRemove.push({
        parent: parentNode,
        child: canvas
    });

    parentNode.appendChild(canvas);
});

html2canvas(targetElem, {
    onrendered: function(canvas) {
        var ctx = canvas.getContext('2d');
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
    }
});

    }

    • Vielen Dank so viel für diese! Das snippet funktioniert wie ein Charme. Ich bin endlich in der Lage, um es arbeiten. Aber ich habe noch, es zu Kalibrieren, wie ich bin zu bemerken, die snapshots beschneiden der Diagramme in einer seltsamen Art und Weise.
    InformationsquelleAutor ABHILASH SB
  3. 1

    Deine Lösung funktioniert wunderbar. Da bin ich nicht die Verwendung von jQuery in meiner Bewerbung, musste ich paar Zeilen in svgCanvas für die svg-Elemente und das Durchlaufen werden. Der rest der Funktionen funktioniert ohne änderungen. Mein code ist...

    function svgToCanvas (targetElem) {
        var nodesToRecover = [];
        var nodesToRemove = [];

        var svgElems = document.getElementsByTagName("svg");

        for (var i=0; i<svgElems.length; i++) {
            var node = svgElems[i];
            var parentNode = node.parentNode;
            var svg = parentNode.innerHTML;

            var canvas = document.createElement('canvas');

            canvg(canvas, svg);

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

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });

            parentNode.appendChild(canvas);
        }
}
    • Dein code hat schon einige nicht verwendete Variablen. Ich weiß, es ist alt, aber Sie sollte wohl hinein schauen 🙂
    InformationsquelleAutor SrinivasG
  4. 0

    html2canvas nicht erlauben, zu speichern SVG ist ein Thema.

    https://github.com/niklasvh/html2canvas/issues/95

    Wenn Sie speichern möchten, eine SVG-Sie Folgen einer anderen Art und Weise, wie für die Transformation von SVG in ein PNG zum Beispiel

    SVG -> canvas -> PNG -> canvas -> PNG

    • Kann ich mit html2canvas mit canvg ? . Ich bin gonna konvertieren ersten canvg vor der Verwendung html2canvas. Ich denke, Sie sind nicht zusammen.
    • Sie können es versuchen, siehe in den link, den ich gepostet hast, in meine Antwort jemanden haben bereits versucht, dieses
    InformationsquelleAutor Alessandro Minoccheri
  5. -2

    Können Sie erstellen Sie Ihre eigenen innerHTML, wie die folgende（github:https://github.com/yelloxing/clay/blob/master/src/_polyfill/innerHTML.js）：
    geben Sie eine Bild-Beschreibung hier

    • Es funktioniert auch im IE9 - IE11
    • Während dieser Zusammenhang kann eine Antwort auf die Frage, ist es besser, die wesentlichen Teile der Antwort hier und den link zur Referenz. Link-nur Antworten können ungültig werden, wenn die verlinkten Seite ändert. beantworten
    InformationsquelleAutor 井上心叶
Schreibe einen Kommentar