SVG в PNG без ширины Атрибут - PullRequest
Новая
       13

SVG в PNG без ширины Атрибут

0 голосов
/ 13 июня 2019

О, привет. У меня есть SVG, который я преобразую в PNG и загружаю на сервер. Все работает, пока я явно указываю значение ширины и высоты в теге SVG. Я использую viewBox = "", чтобы дать SVG соотношение сторон без атрибутов width и height, которые SVG хорошо масштабирует в окне браузера. Поэтому я не хочу включать в тег ширину и высоту.

Вот соответствующая часть кода: 

var svg = document.querySelector( "svg" );
var svgData = new XMLSerializer().serializeToString( svg );
var nzs ="";
var canvas = document.createElement( "canvas" );
canvas.width = $('#mainSVG').width();// I tried giving the canvas a size, but it doesn't help 
canvas.height = $('#mainSVG').height();
console.log(canvas.width +" " + canvas.height);
var ctx = canvas.getContext( "2d" );
var img = document.createElement( "img" );
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) );
img.onload = function() {
	ctx.drawImage( img, 0, 0);
//	ctx.drawImage( img, 0, 0, $('#mainSVG').width(), $('#mainSVG').height() ); // I tried setting the image size in this line but it didn't work either.
	nzs= canvas.toDataURL( "image/png" ); 
	$.ajax({
	  url:"hidden.php",
	  data:{base64: nzs},
	  type:"post",
	  complete:function(){
		console.log("Ready");
	  }
	});
	};
<svg id="mainSVG" clasxmlns="http://www.w3.org/2000/svg" viewBox="0 0 2800 1600">
<!-- <svg id="mainSVG" clasxmlns="http://www.w3.org/2000/svg" viewBox="0 0 2800 1600" width="800" height="1000"> If i use this tag everything works --!>

Как я могу вставить динамически создаваемые ширину и высоту в тег SVG? Я думал о том, чтобы манипулировать строкой svgData, чтобы включить атрибуты width и height, но это не может быть самым простым способом сделать это. Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 13 июня 2019 
var svg = document.querySelector( "svg" ).cloneNode(true); 
svg.setAttribute("width", "whatever");
svg.setAttribute("height", "something else");

затем продолжайте, как вы были. cloneNode создает глубокую копию , и затем вы можете просто установить атрибуты в своей копии по своему усмотрению.

1 голос
/ 13 июня 2019

Это можно сделать, но это громоздко.

Сначала вы должны получить externalHTML вашего элемента svg 

var mySvg = document.getElementById("mySvg").outerHTML;

Это вернет что-то вроде 

<svg id="mySvg" viewBox="0 0 2800 1600"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle> </svg>

Теперь нам нужно «внедрить» атрибуты width и height.К сожалению, объект String Javascript не предлагает встроенного способа вставки текста в определенную позицию, поэтому для этого нам нужно использовать нашу собственную функцию. 

String.prototype.splice = function(index, charsToRemove, str) {
  return this.slice(0, index) + str + this.slice(index + Math.abs(charsToRemove));
};

var width = 200;
var height = 300;

mySvg = mySvg.splice(mySvg.indexOf("svg") + 3, 0, ' width="' + width + '" height="' + height + '"');

Это то, как он будет выглядеть потом

<svg width="200" height="300" id="mySvg" viewBox="0 0 2800 1600">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"></circle>
</svg>

Наконец, давайте избавимся от атрибута viewBox .Для этого нам нужно получить его начальный индекс внутри mySvg и оттуда получить индексы для первого " и последнего " .С помощью start- и endindex мы можем использовать метод splice () еще раз. 

var startIndex = mySvg.indexOf("viewBox");
var endIndex = startIndex;
var occurences = 0;
do {
  if (mySvg.charAt(endIndex) == '"') {
    occurences++;
  }
  endIndex++;
}
while (occurences < 2);

mySvg = mySvg.splice(startIndex,endIndex-startIndex,'');

и изменить externalHTML элемента svg 

document.getElementById("mySvg").outerHTML = mySvg;

Вот полный пример: 

String.prototype.splice = function(index, charsToRemove, str) {
  return this.slice(0, index) + str + this.slice(index + Math.abs(charsToRemove));
};

function modify(width, height) {
  var mySvg = document.getElementById("mySvg").outerHTML;

  mySvg = mySvg.splice(mySvg.indexOf("svg") + 3, 0, ' width="' + width + '" height="' + height + '"');

  var startIndex = mySvg.indexOf("viewBox");
  var endIndex = startIndex;
  var occurences = 0;
  do {
    if (mySvg.charAt(endIndex) == '"') {
      occurences++;
    }
    endIndex++;
  }
  while (occurences < 2);

  mySvg = mySvg.splice(startIndex, endIndex - startIndex, '');
  document.getElementById("mySvg").outerHTML = mySvg;
}
<button onclick="modify(400,300)">modify</button>
<svg id="mySvg" viewBox="0 0 2800 1600">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
...