Конвертировать SVG в PNG, используя холст и 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!"
  }
}

ошибка выглядит так

Я также пытаюсь получить URL-адрес блоба, но не удачу. Я думаю, что проблема в функции img.onload, но я не знаю, в чем проблема... Пожалуйста, помогите мне

Источник

1 ответ

Я использую следующее для загрузки файлов SVG в качестве строки DataURL как <img src=DataURL />, <img> написано как innerHTML DIV. Он не пытается использовать холст и не конвертировать его в 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>
Источник
Другие вопросы по тегам