javascript - imagen - Guardar SVG en línea como JPEG/PNG/SVG

svg a png

Question

Tengo un SVG en línea en mi html, y necesito poder guardarlo como JPEG, PNG o SVG.

He intentado algunos métodos diferentes con la conversión de SVG a lienzo y luego a JPEG, pero no he podido hacer que funcionen.

Aquí hay un ejemplo de mi SVG en línea.

.font {
 color: #ffffff;
 font-family: Roboto;
 font-weight: bold;
 text-transform: uppercase;
}
.name {
 font-size: 64pt;
}
.top-bar-text {
 font-size: 32pt;
}
.font tspan {
 dominant-baseline: middle;
}

<link href=''http://fonts.googleapis.com/css?family=Roboto:700'' rel=''stylesheet'' type=''text/css''>

<svg width="256" height="256" id="icon">
  <rect class="bg1" id="bg_color_1" x="0" y="0" width="256" height="256" fill="#4cbc5a" />
  <path class="bg2" id="bg_color_2" d="M 0 96 L0,256 L256,256 L256,96 s -128 96 -256 0" fill="#08a21c" />
  <text id="left_corner_text" x="24" y="36" width="48" height="64" class="top_bar lct font top-bar-text" text-anchor="middle" fill="#ffffff"><tspan>1</tspan></text>
  <text id="right_corner_text" x="232" y="36" width="48" height="64" class="top_bar rct font top-bar-text" text-anchor="middle" fill="#ffffff"><tspan>2</tspan></text>
  <text id="line_1_text" transform="scale(1,2)" x="128" y="90" width="256" height="192" class="l1t font name" text-anchor="middle" fill="#ffffff"><tspan>ABC</tspan></text>
</svg>

Además, no es necesario exportar todos los elementos, ya que algunas de las opciones que tiene el usuario son eliminar los números de las esquinas superiores.

Me gustaría para cuando se haya convertido para descargar directamente al navegador.

Answer 1

Hoy en día esto es bastante simple.

La idea básica es:

1. svg al lienzo
2. lienzo a dataUrl
3. desencadenar descarga desde dataUrl

en realidad funciona fuera del fragmento de

var btn = document.querySelector(''button'');
var svg = document.querySelector(''svg'');
var canvas = document.querySelector(''canvas'');

function triggerDownload (imgURI) {
  var evt = new MouseEvent(''click'', {
    view: window,
    bubbles: false,
    cancelable: true
  });

  var a = document.createElement(''a'');
  a.setAttribute(''download'', ''MY_COOL_IMAGE.png'');
  a.setAttribute(''href'', imgURI);
  a.setAttribute(''target'', ''_blank'');

  a.dispatchEvent(evt);
}

btn.addEventListener(''click'', function () {
  var canvas = document.getElementById(''canvas'');
  var ctx = canvas.getContext(''2d'');
  var data = (new XMLSerializer()).serializeToString(svg);
  var DOMURL = window.URL || window.webkitURL || window;

  var img = new Image();
  var svgBlob = new Blob([data], {type: ''image/svg+xml;charset=utf-8''});
  var url = DOMURL.createObjectURL(svgBlob);

  img.onload = function () {
    ctx.drawImage(img, 0, 0);
    DOMURL.revokeObjectURL(url);

    var imgURI = canvas
        .toDataURL(''image/png'')
        .replace(''image/png'', ''image/octet-stream'');

    triggerDownload(imgURI);
  };

  img.src = url;
});

<button>svg to png</button>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="200" height="200">
  <rect x="10" y="10" width="50" height="50" />
  <text x="0" y="100">Look, i''m cool</text>
</svg>

<canvas id="canvas"></canvas>

Con respecto a la parte de descarga, puede configurar un nombre de archivo, etc., etc. (aunque no en este ejemplo). Hace algunos días respondí una pregunta sobre cómo descargar una parte específica de HTML de la página dada. Podría ser útil con respecto a la parte de descarga: https://.com/a/28087280/2178180

actualización : ahora le permite especificar el nombre de archivo