使用canvas和filereader将svg转换为png

我尝试将svg转换为png。我第一次工作正常，但第二次坠毁。我不知道这是如何发生的。我的代码是使用canvas和filereader将svg转换为png

function upload(file) { 

    var imageType = /image.*/; 

    if (file.type.match(imageType)) { 
    var reader = new FileReader(); 

    reader.onload = function(e) { 
     fileDisplayArea.innerHTML = ""; 

     var img = new Image(); 
     img.src = reader.result; 

     fileDisplayArea.appendChild(img); 

     img.onload = function() { 

     var canvas = document.createElement('canvas'); 
     //var canvas = document.querySelector("canvas"); 
     canvas.width = img.width; 
     canvas.height = img.height; 

     var context = canvas.getContext("2d"); 

     context.drawImage(img, 0, 0); 

     var a = document.createElement("a"); 
     a.download = "image.png"; 
     a.href = canvas.toDataURL("image/png");  
     a.click(); 

     }; 
    } 

    reader.readAsDataURL(file); 
    } else { 
    fileDisplayArea.innerHTML = "File not supported!" 
    } 
}

错误这个样子的

enter image description here

我也尝试采取BLOB URL，但不是成功。我认为问题在img.onload函数，但我没有什么问题...请帮我

来源

2014-04-09 Pratik Parekh

我把img.src img.onload后，但仍问题是相同的......没有变化......第一做工精细，之后坠毁 –

我得到的错误看起来就像图像 –

这是镀铬的错误，在mozila它工作完美 –

我使用以下加载svg文件作为DataURL字符串为<img src=DataURL />。 <img>被写为DIV的innerHTML。它不会尝试使用画布，也不会将其转换为PNG。

下面的示例从您的计算机加载svg文件。试试你的应用程序。希望它适合你。

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<title>Preview SVG Image(s) From Your Computer</title> 
</head> 
<body style='font-family:arial;'> 
<center> 
<h4>Preview SVG Image(s) From Your Computer</h4> 
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'> 
Preview the image of local SVG file(s) on your computer. Uses <b>FileReader</b> object to create <B>DataURL</B> 
</div> 
<div style='padding:10px;' id=imageDiv></div> 
<input title="file to DataURL" onChange=loadSVGImg() type="file" id="ImgFile" /> 
<button onClick=clearData()>clear</button><br /> 
<div id=dataDiv></div> 
<textarea id=dataValue style='width:90%;height:60px;font-family:lucida console;'></textarea> 
    <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> 
<div id='browserDiv' style='padding:3px;position:absolute;top:5px;left:5px;background-color:gainsboro;'></div> 
<script id=myScript > 
var Reader = new FileReader(); 
//---file onChange--- 
function loadSVGImg() 
{ 
    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) 
      { 
       imageDiv.innerHTML += ['<img src="', e.target.result, 
       '" title="', escape(theFile.name), '"/>'].join(''); 
       imageDiv.innerHTML +="<br/>"+escape(theFile.name) +" @ "+ theFile.size +" bytes<br/>" 
       dataValue.value=e.target.result 
       dataDiv.innerHTML=escape(theFile.name)+" DataURL:" 
      }; 
     })(imgFile); 

     //---Read in the image file as a data URL--- 
     Reader.readAsDataURL(imgFile); 
    } 
} 
//---button--- 
function clearData() 
{ 
    imageDiv.innerHTML="" 
    dataDiv.innerHTML="" 
    dataValue.value="" 
} 
</script> 
<script> 
document.addEventListener("onload",init(),false) 
function init() 
{ 
    jsValue.value=myScript.text 
} 

</script> 

</body> 
</html>

来源

2014-04-09 15:16:10

感谢兄弟...但你的代码返回svg文件，我需要PNG ....你有任何想法??? –

我在想，PNG并不重要。你为什么需要PNG？ –

使用canvas和filereader将svg转换为png

回答

相关问题