Как конвертировать SVG в PNG в браузере и скачать изображение - PullRequest
Новая
       39

Как конвертировать SVG в PNG в браузере и скачать изображение

0 голосов
/ 21 апреля 2019

У меня есть следующий код, чтобы попытаться загрузить SVG как PNG в браузере без сервера. 

<!doctype html>
<html>
  <body>
    <textarea id='m'></textarea>
    <script>
      var m = document.getElementById('m')
      m.oninput = oninput

      function oninput() {
        var c = document.createElement('canvas')
        var s = c.getContext('2d')
        var i = new Image

        i.width = c.width = 10000
        i.height = c.height = 10000
        i.onload = onload
        i.onerror = onerror
        i.src = 'data:image/svg+xml,' + encodeURIComponent(m.value)

        function onload() {
          s.drawImage(i, 0, 0, i.width, i.height)

          var a = document.createElement('a')
          a.download = 'image.png'
          a.href = c.toDataURL('image/png')
          a.click();
        }

        function onerror(e) {
          console.log(arguments)
        }
      }
    </script>
  </body>
</html>

Это не работает, хотя, по некоторым причинам, функциональность <a download>, похоже, не работает.Когда генерируется URI данных, в моем случае он составляет около 4 МБ, поэтому я прочитал, что он может быть слишком большим для работы функции загрузки ссылок.Я хотел бы, чтобы это работало в разных браузерах.

Я пытался использовать iframe , но не пошел.Я также попытался просто сделать window.location.href = dataURL, но это тоже выдает ошибку.Я также видел Преобразование SVG в изображение (JPEG, PNG и т. Д.) В браузере , но ни один из ответов не сработал.

Хотите знать, что нужно сделать, чтобы получить это скачать изображение из браузера без сервера.

...