2016-11-03 21 views
0

inskapeなどのコマンドラインツールを使用せずにVB6コードを使用してPNGファイルのSVG文字列をプログラムで変換する方法はありますか?プログラムでSVGをPNGに変換する

おかげ

EDIT:いくつかの詳細は、この変換は、IEのWebブラウザコントロールで実行することができますがキャンバスとのすべての例は、FirefoxやChromeで完璧に動作しなくIE(9-10-11)で、それはです既知のバグですが修正されません。

私のプログラムはWebクライアントではなく、VB6でこの変換を直接実行したいと思います。severalsプログラムはSVGをPNGに変換します。この変換を実行するにはとても複雑ですか?

+1

たぶん、その後、画像をキャプチャ、WebBrowserコントロール内のSVGレンダリング? – xvan

+0

JAVAや奇妙な解決策なしでお願いします! – user1069516

答えて

0

次の例を使用できます。 .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() 
 
{ 
 
\t drawImgDiv.innerHTML="" 
 

 
\t var imgFile = ImgFile.files[0]; // ---FileList objec 
 
\t //--Only process image files--- 
 
\t if (imgFile.type.match('image.*')) 
 
\t { 
 
\t \t //---Closure to capture the file information--- 
 
\t \t Reader.onload = (function(theFile) 
 
\t \t { 
 
\t \t return function(e) 
 
\t \t { 
 
\t \t \t drawImgDiv.innerHTML += ['<img id=drawImage src="', e.target.result, 
 
\t \t \t '" title="', escape(theFile.name), '"/>'].join(''); 
 
\t \t \t drawImage.onload = function() 
 
\t \t \t { 
 
\t \t \t \t myCanvas.width=drawImage.width 
 
\t \t \t \t myCanvas.height=drawImage.height 
 
\t \t \t \t var ctx = myCanvas.getContext("2d"); 
 
\t \t \t \t ctx.drawImage(drawImage, 0, 0); 
 
\t \t \t \t var canvasdata = myCanvas.toDataURL("image/png"); 
 
\t \t \t \t pngImg.src = canvasdata 
 
\t \t \t \t pngDataURLValue.value=canvasdata 
 
\t \t \t \t imgWidthSpan.innerHTML=drawImage.width 
 
\t \t \t \t imgHeightSpan.innerHTML=drawImage.height 
 
\t \t \t } 
 
\t \t }; 
 
\t \t })(imgFile); 
 

 
\t //---Read in the image file as a data URL--- 
 
\t Reader.readAsDataURL(imgFile); 
 
\t } 
 
} 
 

 
</script> 
 
<script> 
 
document.addEventListener("onload",init(),false) 
 
function init() 
 
{ 
 

 
\t jsValue.value=myScript.text 
 
} 
 
</script> 
 
</body> 
 
</html>

+0

シンクライアントで同じコードを使用していますが、IE11では動作しません。残念なことにVB6ではIEエンジンを使用しているので、これを実行する別のソリューションを探しています – user1069516

関連する問題