如何將SVG導出爲PNG格式

對於大小問題，我刪除了一些svg內容。我想實現導出爲PNG或任何圖像格式報告目的如何將SVG導出爲PNG格式

<!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>

來源

2016-10-19 arun kumar

我們有幾個問題，你的方法SVG圖像。我刪除了JQ &簡化了SVG本身。首先，您需要在設置源之前設置發生在img上的事件。一旦做到這一點的SRC已經與URI來進行設置，通常這是一個鏈接，但我們可以用

data:image/svg+xml;base64

因此，這裏是將登錄到控制檯版本的<svg>如巴紐（用base64）。

<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>

來源

2016-10-19 04:54:47 user3094755

如何將SVG導出爲PNG格式

回答

相關問題