使用Canvas和FileReader将SVG转换为PNG

Question

使用Canvas和FileReader将SVG转换为PNG

3

我尝试将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!"
  }
}

错误看起来像这样

在此输入图片描述

我也尝试了获取blob url但不成功。我认为问题出在img.onload函数上，但我不知道出了什么问题...请帮帮我。

- Pratik Parekh

我得到了一个看起来像图片中的错误。 - Pratik Parekh

这是一个 JSFiddle 链接：http://jsfiddle.net/barney/Qa7Q5/。无法重现错误。 - Barney

抱歉，先生，它也会生成错误...我在另一台电脑上尝试了一下，它可以正常工作。但是在我的电脑上会出现错误，我不明白为什么会这样。我的电脑有问题吗？？？ - Pratik Parekh

1

非常奇怪。我创建了一个新的fiddle，在每个步骤中都有警报。在崩溃之前，你看到的最后一个警报是什么？ - Barney

它可以使用警报进行工作，但是我用console.log替换后会生成错误...这很奇怪... - Pratik Parekh

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Francis Hemsher · Accepted Answer

我使用以下方式将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>