问以编程方式将SVG转换为PNG
EN

Stack Overflow用户

提问于 2016-11-03 22:31:21

回答 1查看 1.3K关注 0票数 0

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

编辑:一些细节，这个转换可以在IE浏览器控件中执行，但所有使用canvas的示例都可以完美地与firefox或chrome一起工作，但不能在IE (9-10-11)中运行，这是一个已知的错误，但没有得到纠正。

我的程序不是一个网络客户端，我想直接在VB6中执行这个转换，有几个程序管理转换到PNG，它是如此复杂，执行这种转换？

svg

vb6

回答 1

Stack Overflow用户

发布于 2016-11-04 01:14:10

也许你可以使用下面的例子。它将.svg文件从您的计算机加载到canvas中，然后使用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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/40404197

复制

相似问题

问以编程方式将SVG转换为PNG
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以编程方式将SVG转换为PNGEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问以编程方式将SVG转换为PNG
EN