캔버스와 파일 판독기를 사용하여 svg를 png로 변환합니다.

svg를 png로 변환하려고합니다. 나는 처음에는 잘 작동하지만 두 번째로 추락했습니다. 나는 이것이 어떻게 일어날 지 모른다. 내 코드는캔버스와 파일 판독기를 사용하여 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!" 
    } 
}

오류보기 나는 또한 방울의 URL이 아닌 성공을하려고이

enter image description here

같다. 나는 img.onload 함수에 문제가 있다고 생각하지만 문제가 무엇인지 모르겠다. 제발 도와주세요.

출처

2014-04-09 Pratik Parekh

내가 img.onload 후 img.src 배치하지만 여전히 문제는 같은 ... 아니 변경 ... 첫 작품의 벌금이며이 –

추락 그 후 나는이 오류가 영상이 크롬 오류가 –

에 같이 얻을, 모질라에서 완벽하게 작동합니다. –

다음을 사용하여 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

Bro에게 감사드립니다 ...하지만 코드가 SVG 파일을 반환하고 PNG가 필요합니다 ... ??? –

나는 png가 중요하지 않다고 생각했다. 왜 PNG가 필요한가요? –

캔버스와 파일 판독기를 사용하여 svg를 png로 변환합니다.

답변

관련 문제