如何将SVG导出为PNG格式

How to Exporting SVG as PNG format

本文关键字：PNG 格式 SVG      更新时间：2023-09-26

对于大小问题，我删除了一些svg内容。我想实现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>

关于你的方法我们有一些问题。我删除了JQ & &;简化了SVG本身。首先，在设置源之前，需要使用onload事件设置对img发生的操作。一旦完成，src就会被设置一个URI，通常是一个链接，但我们可以使用

data:image/svg+xml;base64

所以这是一个版本，它将记录到控制台的<svg>为。png(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>
相关文章：