So exportieren Sie SVG als PNG-Format

Für die Größe Problem habe ich einige Svg Inhalt entfernt. Ich will das SVG-Bild erreichen als png oder einem Bildformat für das Reporting ZweckSo exportieren Sie SVG als PNG-Format

<!DOCTYPE html> 
     <html> 
     <head> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
     $(function(){ 
     function SaveasImage(){ 
     var myCanvas = document.getElementById('myCanvas'); 
     // get 2D context 
     var myCanvasContext = myCanvas.getContext('2d'); 
     // Load up our image. 
     var source = new Image(); 
     var img = document.getElementById('svg1'); 
     source.src = img.svg; 
     myCanvasContext.drawImage(source,0,0,200,200); 
     $("#resultImage").attr("src",myCanvas.toDataURL("image/png")); 
     } 
     }); 
     </script> 
     </head> 
     <body> 
     <h1>My first SVG</h1> 
     <canvas id="myCanvas" width="200" height="100"></canvas> 
     <svg version="1.1" id="svg1" style="font-family:&quot;Lucida Grande&quot;, 
     &quot;Lucida Sans Unicode&quot;, Arial, Helvetica, sans-serif;font-size:12px;" xmlns="http://www.w3.org/2000/svg" width="322" height="194"><text x="49" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:96px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="76" opacity="1">50</text><text x="49" style="color:#606060;cursor:default;font-size:11px;fill:#606060;width:96px;text-overflow:clip;" text-anchor="end" transform="translate(0,0)" y="13" opacity="1">100</text></g></svg> 
     <input type="button" onclick="SaveasImage()" value="exportasimage" /> 
     </body> 
     </html>

Quelle

2016-10-19 arun kumar

Es wir ein paar Probleme mit Ihrem Ansatz werden exportiert. Ich entfernte JQ & vereinfacht das SVG selbst. Zunächst müssen Sie festlegen, was mit dem img mit einem Onload-Ereignis passiert, bevor Sie die Quelle festlegen. Sobald dies der src erfolgt ist mit einer URI festgelegt werden, in der Regel ist dies ein Link, aber können wir verwenden

data:image/svg+xml;base64

Also hier ist eine Version, die Ihr <svg> als .png (in base64) auf der Konsole protokolliert.

<html> 
<head> 
    <script> 
    window.onload = function() { 
    var myCanvas = document.getElementById('myCanvas'); 
    var myCanvasContext = myCanvas.getContext('2d'); 
    var source = new Image(); 
    var img = document.getElementById('svg1'); 
    source.onload = function() { 
    myCanvasContext.drawImage(source,0,0,200,200); 
    document.getElementById('output').src = myCanvas.toDataURL("image/png"); 
    console.log(myCanvas.toDataURL("image/png")); 
    }  
    source.src = 'data:image/svg+xml;base64,'+btoa(img.outerHTML); 
    } 
    </script> 
    </script> 
</head> 
<body> 
    <h1>My first SVG</h1> 
    <canvas id="myCanvas" width="200" height="100"></canvas> 
    <svg version="1.1" id="svg1" xmlns="http://www.w3.org/2000/svg" width="322" height="194"> 
    <text x="49" text-anchor="end" transform="translate(0,0)" y="76" opacity="1">50</text> 
    <text x="49" text-anchor="end" transform="translate(0,0)" y="13" opacity="1">100</text> 
    </svg> 
    <img id="output" /> 
    <input type="button" onclick="SaveasImage()" value="exportasimage" /> 
</body> 
</html>

Quelle

2016-10-19 04:54:47 user3094755

So exportieren Sie SVG als PNG-Format

Antwort

Verwandte Themen