Question

有没有办法在不使用inskape或其他命令行工具的情况下使用VB6代码以编程方式转换PNG文件中的SVG字符串？

编辑：一些细节，这个转换可以在IE浏览器控件中执行，但所有带有画布的示例都与firefox或chrome完美配合但不在IE浏览器中（9-10-11），这是一个已知的错误但未得到纠正。

我的程序不是Web客户端，我想直接在VB6中执行此转换，多个程序设法将SVG转换为PNG，执行此转换是如此复杂？

Answer 1

也许您可以使用以下示例。它将.svg文件从您的计算机加载到画布中，然后使用FileReader和dataURL将其转换为.png。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Convert SVG to Canvas to PNG dataURL</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:10px;font-family:arial'>
<center>
<h4>Convert SVG to Canvas to PNG dataURL</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
This is a utility used to convert files on your computer from SVG to a PNG dataURL

<br /><i>NOTE; This works in FF/CH. IE throws a security error</i>
</div>

<table><tr>


<td>
<div id=drawImgDiv>
</div>
<center>1.) canvas drawImage (svg)</center>
</td>
<td>
<div>
<canvas id=myCanvas></canvas>
</div>
<center>2.) Canvas</center>
</td>
<td>
<img id=pngImg  />
<center>3.) PNG</center>
</td>
<tr><td colspan=3 align=center>
<input title="file to DataURL" onChange=loadSVGFile() type="file" id="ImgFile" />
</td></tr>
</tr></table>

   <br />PNG dataURL: width="<span id=imgWidthSpan></span>"  height="<span id=imgHeightSpan></span>"      <br />
<textarea id=pngDataURLValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
  <br />
  <br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>

<script id=myScript>
var Reader = new FileReader();
//---file onChange---
function loadSVGFile()
{
	drawImgDiv.innerHTML=""

	var imgFile = ImgFile.files[0]; // ---FileList objec
	//--Only process image files---
	if (imgFile.type.match('image.*'))
	{
		//---Closure to capture the file information---
		Reader.onload = (function(theFile)
		{
		return function(e)
		{
			drawImgDiv.innerHTML += ['<img id=drawImage src="', e.target.result,
			'" title="', escape(theFile.name), '"/>'].join('');
			drawImage.onload = function()
			{
				myCanvas.width=drawImage.width
				myCanvas.height=drawImage.height
				var ctx = myCanvas.getContext( "2d" );
				ctx.drawImage(drawImage, 0, 0 );
				var canvasdata = myCanvas.toDataURL("image/png");
				pngImg.src = canvasdata
				pngDataURLValue.value=canvasdata
				imgWidthSpan.innerHTML=drawImage.width
				imgHeightSpan.innerHTML=drawImage.height
			}
		};
		})(imgFile);

	//---Read in the image file as a data URL---
	Reader.readAsDataURL(imgFile);
	}
}

</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{

	jsValue.value=myScript.text
}
</script>
</body>
</html>

以编程方式将SVG转换为PNG

1 个答案: