如何将SVG导出为PNG格式 [英] How to Exporting SVG as PNG format
问题描述
对于大小问题，我删除了一些svg内容.我想实现将svg图像导出为png或用于报告目的的任何图像格式
For the Size problem i removed some svg content. I want to achieve the svg image to be exported as png or any image format for Reporting purpose
<!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:"Lucida Grande",
"Lucida Sans Unicode", 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发生的事情，然后再设置源.完成此操作后，便已使用URI设置了src，通常这是一个链接，但是我们可以使用
There we a few issues with your approach. I removed JQ & simplified the SVG itself. First, you need to set up what happens to the img with an onload event before you set the source. Once this is done the src has be be set with a URI, usually this is a link, but we can use
data:image/svg+xml;base64
因此，这是一个版本，该版本将以.png(在base64中)登录以控制台您的< svg> .
So here's a version which will log to console your <svg> as .png(in 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>
这篇关于如何将SVG导出为PNG格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
