CODEWITHSUNDEEP
svgvb6
user1069516
user1069516

Reputation: 463

Convert SVG to PNG programmatically

Is there a way to programmatically convert a SVG string in a PNG file using VB6 code without using inskape or others command line tools?

EDIT: Some details, this conversion could be performed in the IE web browser control but all examples with canvas works perfectly with firefox or chrome but not in IE (9-10-11), it's a known bug but not corrected.

My program is not a web client and I would like to perform this conversion directly in VB6, severals programs manage to convert SVG to PNG, it is so complex to perform this conversion?

Upvotes: 0

Views: 2203

Answers (1)

Francis Hemsher
Francis Hemsher

Reputation: 3488

Maybe you can use the following example. It loads an .svg file from your computer into canvas then converts it to .png using FileReader and dataURL.

<!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>

Upvotes: 1

Related Questions