Convert HTML, das SVG-Elemente in Bilddatei enthält

Ich versuche, einen HTML-Code in Bilddatei (PNG, JPG, was auch immer) zu konvertieren. Doch all Ansatz, den ich versucht, nicht funktioniert, weil mein HTML-Code SVG-Elemente wie das hat:Convert HTML, das SVG-Elemente in Bilddatei enthält

<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150.000000 150.000000" preserveAspectRatio="xMidYMid meet" class="img30p icon-main-color"> 
    <g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> 
    <path d="M572 1430 c-233 -62 -408 -227 -490 -459 -24 -69 -27 -89 -27 -221 0 -132 3 -152 27 -221 39 -110 92 -194 172 -275 81 -80 165 -133 275 -172 69 -24 89 -27 221 -27 132 0 152 3 221 27 110 39 194 92 275 172 80 81 133 165 172 275 24 69 27 89 27 221 0 132 -3 152 -27 221 -39 110 -92 194 -172 275 -81 81 -166 134 -275 171 -105 36 -291 42 -399 13z m376 -83 c100 -35 171 -80 245 -154 76 -76 126 -158 158 -255 20 -60 24 -94 24 -188 0 -94 -4 -128 -24 -188 -32 -97 -82 -179 -158 -255 -73 -74 -144 -119 -245 -155 -63 -23 -89 -26 -193 -27 -100 0 -132 4 -193 24 -368 121 -544 530 -377 876 79 164 240 294 421 340 92 23 250 15 342 -18z"></path> 
    <path d="M873 788 l-183 -183 -100 100 c-83 83 -103 98 -117 89 -48 -30 -44 -38 90 -171 l127 -128 212 212 212 212 -24 26 c-13 14 -26 25 -29 25 -3 0 -88 -82 -188 -182z"></path> 
    </g> 
</svg>

Ich versuchte Html2Canvas zu benutzen und nicht gearbeitet:

<html> 
<head> 
<meta charset="utf-8"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script type="text/javascript" src="html2canvas.js"></script> 
<script> 

$(function(){ 
    $('#save_image_locally').click(function(){ 
     html2canvas($('#imagesave'), { 
      onrendered: function (canvas) { 
       var a = document.createElement('a'); 
       a.href = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream"); 
       a.download = 'test.jpg'; 
       a.click(); 
      } 
     }); 
    }); 
}); 

</script> 
</head> 
<body> 

<div id="imagesave" style="width: 200px"> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150.000000 150.000000" preserveAspectRatio="xMidYMid meet" class="img30p icon-main-color"> 
    <g transform="translate(0.000000,150.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none"> 
    <path d="M572 1430 c-233 -62 -408 -227 -490 -459 -24 -69 -27 -89 -27 -221 0 -132 3 -152 27 -221 39 -110 92 -194 172 -275 81 -80 165 -133 275 -172 69 -24 89 -27 221 -27 132 0 152 3 221 27 110 39 194 92 275 172 80 81 133 165 172 275 24 69 27 89 27 221 0 132 -3 152 -27 221 -39 110 -92 194 -172 275 -81 81 -166 134 -275 171 -105 36 -291 42 -399 13z m376 -83 c100 -35 171 -80 245 -154 76 -76 126 -158 158 -255 20 -60 24 -94 24 -188 0 -94 -4 -128 -24 -188 -32 -97 -82 -179 -158 -255 -73 -74 -144 -119 -245 -155 -63 -23 -89 -26 -193 -27 -100 0 -132 4 -193 24 -368 121 -544 530 -377 876 79 164 240 294 421 340 92 23 250 15 342 -18z"></path> 
    <path d="M873 788 l-183 -183 -100 100 c-83 83 -103 98 -117 89 -48 -30 -44 -38 90 -171 l127 -128 212 212 212 212 -24 26 c-13 14 -26 25 -29 25 -3 0 -88 -82 -188 -182z"></path> 
    </g> 
    </svg> 
</div> 

<input type="button" id="save_image_locally" value="click"/> 
</body> 
</html>

Hat jemand irgendwelche Idee, damit es funktioniert? Oder ein Ansatz, der PHP verwendet? Vielen Dank.

Quelle

2016-05-16 Breno Macena

Möglichen Duplikat [Konvertieren SVG Bild (JPEG, PNG, etc.) im Browser] sehen (http://stackoverflow.com/questions/3975499/convert- svg-zu-bild-jpeg-png-etc-in-the-browser) – Terry

Convert SVG zu Bild ist eine Art troublesome. Die übliche Strategie besteht darin, zuerst das SVG in ein Canvas-Element und dann in die Image-Datei zu konvertieren.

Um dies zu tun, benötigen Sie die canvg library.

Beginnen wir. Zunächst einmal müssen Sie Ihre SVG

var svgImage = $('#imagesave').children('svg')[0]; 
var serializer = new XMLSerializer(); 
var str = serializer.serializeToString(svgImage);

Dann serialiaze, eine Leinwand erstellen und in die DOM einfügen

var $canvas = $('<canvas/>'); 
$canvas.attr('width', '150px;') 
$canvas.attr('height', '150px;') 
$canvas.appendTo('body');

nun "malen" die Leinwand mit Ihrem SVG canvg mit

canvg($canvas.get(0), str);

Und dann speichern Sie das Bild

html2canvas($canvas, { 
    onrendered: function (canvas) { 
    var a = document.createElement('a'); 
    a.href = canvas.toDataURL(); 
    a.download = 'test.png'; 
    a.click(); 
    $canvas.remove(); //removes canvas from body 
    } 
});

du ganz in diesem jsFiddle

Quelle

2016-05-17 19:46:12 matheusr

Unglaublich !!! Es ist perfekt! Vielen Dank mein Freund, es hat sehr geholfen! –

Glücklich zu helfen :) – matheusr

Mein Vorschlag ist es, die verschiedenen Dateitypen, die Sie, indem Sie diese aus Ihrem SVG-Code erstellen müssen:

Sie Inkscape verwenden können ‚s Export-Funktion, indem man zuerst den Import Ihrer SVG-Code in Inkscape eine .png-Datei erstellen . Dann öffnen Sie mit einem Programm wie Paint Ihre neu erstellte .png-Datei und speichern Sie eine Kopie als .jpg. Jetzt haben Sie zwei Bilddateien bereit, um gespeichert zu werden.

Ich bin mir nicht sicher über eine andere Möglichkeit, eine Svg-Grafik über eine Webseite als mehrere Dateitypen zu speichern. Dies ist jedoch eine gute Idee, also gibt es vielleicht einige existierende Opensourcen.

Quelle

2016-05-16 20:10:12

Convert HTML, das SVG-Elemente in Bilddatei enthält

Antwort

Verwandte Themen