Question

我尝试将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功能有问题，但我不知道是什么问题...请帮助我

Answer 1

我使用以下命令将svg文件作为DataURL字符串加载为<img src=DataURL />。 <img>被写为DIV的innerHTML。它不会尝试使用canvas，也不会将其转换为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>

使用canvas和filereader将svg转换为png

1 个答案: