使用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

回答

相關問題