将用Javascript绘制的外部SVG文件导出为PNG图像

Export external SVG file painted with Javascript to PNG image

本文关键字：PNG 图像 文件 SVG Javascript 绘制 外部 将用      更新时间：2023-09-26

我正在使用来自外部文件的 svg 映射。 我使用"对象"标签将其插入我的 html 代码中。

<object id="mymap" data="map.svg" width="884" height="760" type="image/svg+xml" ></object>

在javascript中，我用一些给定的颜色绘制svg地图的路径。例如：

<script>
var path1 = document.getElementById('mymap').getSVGDocument().getElementById('path1');
path1.style.fill='#f00';
var path2 = document.getElementById('mymap').getSVGDocument().getElementById('path2');
path2.style.fill='#0f0';
</script>

如何将生成的彩色地图导出为 PNG 图像？

-

-更新-- ： 问题已得到解答，LiveExample 现在包含解决方案以供将来参考。 您可以查看源代码并获取解决方案。 该示例绘制地图并将绘制的地图保存在画布中，然后您可以将其另存为文件

  • 示例解决方案 显示画布
  • 示例解决方案 隐藏画布并直接下载到生成的图像

解决方案如下：根据我接受的解决方案，我包括管理所有步骤的完整 javascript

创建画布

<canvas id="canvas" style="border:1px solid black;" width="884" height="760"></canvas>

将绘制的 svg 中的图像绘制到该画布中

function drawCanvas(){
    // create a canvas and context
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // define svgdocument and make blob containing its data
    var svgDoc = document.getElementById('mymap').getSVGDocument();
    var svg = new Blob([svgDoc.lastChild.outerHTML], {type: 'image/svg+xml;charset=utf-8'});

    // create a new image
    var DOMURL = window.URL || window.webkitURL || window;
    var url = DOMURL.createObjectURL(svg); 
    var img = new Image(); 
    img.onload = function(){ 
        ctx.drawImage(img,0,0,884,760); 
        DOMURL.revokeObjectURL(url);
    };
    img.src = url;
}
  • 示例解决方案 显示画布
  • 示例解决方案 隐藏画布并直接下载到生成的图像

将 svg 绘制到画布上，然后使用.toDataURL获取 PNG 图像怎么样？

--更新--为了进行快速测试，我从您的现场演示中在控制台中运行以下内容：

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var svgDoc = document.getElementById('mymap').getSVGDocument();
var svg = new Blob([svgDoc.lastChild.outerHTML], {type: 'image/svg+xml;charset=utf-8'});
var img = new Image(); 
img.onload = function(){ ctx.drawImage(img,0,0); };
img.src = url

你应该看到 URL，它有图像绘制，此时只需调用 .toDataURL 你应该得到 base64 图像数据

相关文章：