Конвертировать SVG в PNG / JPEG с пользовательской шириной и высотой - PullRequest
Новая
       20

Конвертировать SVG в PNG / JPEG с пользовательской шириной и высотой

0 голосов
/ 07 ноября 2018

У меня есть код SVG с шириной и высотой. Я хочу скачать этот SVG в формате PNG и JPEG с пользовательской шириной и высотой. Я попробовал подход HTML canvas для достижения этой цели, но когда холст рисует изображение, он обрезает SVG.

Вот код

Код SVG 

<svg id="svgcontent" width="640" height="480" x="640" y="480" overflow="visible" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 480"><!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit--><g class="layer" style="pointer-events:all"><title style="pointer-events:inherit">Layer 1</title><ellipse fill="#FF0000" stroke="#000000" stroke-width="5" cx="280.5" cy="235.5" rx="217" ry="198" id="svg_1"></ellipse></g></svg>

JavaScript функция для преобразования SVG в PNG / JPEG 

    function save() {
// Converting SVG to String 
    var stringobJ = new XMLSerializer();
      var svg = document.getElementById('svgcontent');
      var svgString = stringobJ .serializeToString(svg );
// IE9 doesn't allow standalone Data URLs
      svg = '<?xml version="1.0"?>\n' + svgString ; 

// Creating an Image Element
      var image = new Image();
      image.src = 'data:image/svg+xml;base64,' + btoa(svg);
      image.width = 300; // This doesn't have any effect
      image.height = 150; // This doesn't have any effect

// Creating Canvas Element 
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      image.onload = function() {
        context.drawImage(image, 0, 0);
        var a = document.createElement('a');
        a.download = "image.png"; //Saving in PNG
        a.href = canvas.toDataURL('image/png'); //Saving in PNG
        a.style = 'display: none;';
        a.click();
      }
    }

Это дает мне Imgae в формате PNG, но это не полное изображение SVG, это просто часть изображения в соответствии с шириной холста. Bcz canvas рисует изображение из верхнего правого угла изображения и продолжает рисовать изображение до ширины и высоты холста. .

По умолчанию ширина холста равна 300, а высота равна 150

Так что, если ширина и высота холста не указаны, просто выведите его и получите изображение 300x150.

Я пытался canvas.width = anyvalue; canvas.height= anyvalue; но это не влияет на вывод

что я хочу

что неважно каковы размеры SVG когда пользователь задает ширину и высоту, SVG должен полностью поместиться в canvas

Это фактический SVG, и он действительно необходим для загрузки со всем белым фоном и изображением

X

это вывод, но я хочу полное изображение с этими размерами

X

Задание ширины и высоты для холста, как у настоящего SVG, не является решением моей проблемы ..... ширина и высота холста является динамической

jsfiddle ссылка на проблему

1 Ответ

0 голосов
/ 07 ноября 2018

Я сделал несколько изменений: Ваш SVG viewBox="0 0 640 480". Это определяет размер холста SVG. Когда вы рисуете изображение (если вы не хотите его обрезать), вы хотите сохранить пропорциональную высоту, т.е. если вы хотите, чтобы ширина была 300, высота должна быть 225.

Затем, когда вы создаете новый элемент canvas, вам нужно объявить ширину и высоту элемента canvas canvas.width = image.width, canvas.height = image.height, перед рисованием изображения. 

function save() {
// Converting SVG to String 
    var stringobJ = new XMLSerializer();
      var svg = document.getElementById('svgcontent');
      var svgString = stringobJ .serializeToString(svg );
// IE9 doesn't allow standalone Data URLs
      svg = '<?xml version="1.0"?>\n' + svgString ; 

// Creating an Image Element
      var image = new Image();
      image.src = 'data:image/svg+xml;base64,' + btoa(svg);
      image.width = 300; 
      image.height = 480*image.width / 640; // keep the height proportional

// Creating Canvas Element 
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
      
      image.onload = function() {
        canvas.width = image.width,canvas.height = image.height,
        
        context.drawImage(image, 0, 0);
        var a = document.createElement('a');
        a.download = "image.png"; //Saving in PNG
        a.href = canvas.toDataURL('image/png'); //Saving in PNG
        a.style = 'display: none;';
        a.click();
      }
    }

//save()
<svg id="svgcontent" viewBox="0 0 640 480" xmlns="http://www.w3.org/2000/svg" xmlns:se="http://svg-edit.googlecode.com" xmlns:xlink="http://www.w3.org/1999/xlink"><!-- Created with SVG-edit - https://github.com/SVG-Edit/svgedit-->
<g class="layer" style="pointer-events:all">
<title style="pointer-events:inherit">Layer 1</title>
<ellipse fill="#FF0000" stroke="#000000" stroke-width="5" cx="280.5" cy="235.5" rx="217" ry="198" id="svg_1"></ellipse>
</g>
</svg>
...