我正在使用来自外部文件的 svg map 。我使用“object”标签将它插入到我的 html 代码中。
<object id="mymap" data="map.svg" width="884" height="760" type="image/svg+xml" ></object>
在 javascript 中，我用一些给定的颜色绘制 svg map 的路径。例如:
<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>
如何将生成的彩色 map 导出为 PNG 图像？
--更新--:问题已得到解答，LiveExample 现在包含解决方案以供将来引用。您可以查看源代码并获得解决方案。该示例绘制 map 并将绘制的 map 保存在 Canvas 中，然后您可以将其另存为文件
最佳答案
解决方法如下: 根据我接受的解决方案，我包含了管理所有步骤的完整 javascript
创建 Canvas
<canvas id="canvas" style="border:1px solid black;" width="884" height="760"></canvas>
将绘制的 svg 中的图像绘制到 Canvas 中
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;
}
关于javascript - 将使用 Javascript 绘制的外部 SVG 文件导出为 PNG 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27710409/