javascript - insertar - svg web

Convierta SVG a PNG con imágenes aplicadas como fondo a elementos svg

Question

Tengo un archivo SVG externo que contiene algunas etiquetas de imagen incrustadas en el patrón. Cada vez que convierto este SVG en PNG usando toDataURL() , las imágenes PNG generadas no contienen la imagen que he aplicado como patrón a algunas rutas SVG. ¿Hay alguna forma de resolver este problema?

Answer 1

Sí, hay: agregue el svg a su documento y codifique todas las imágenes incluidas en dataURIs.

Estoy escribiendo un script que hace esto y también algunas otras cosas como incluir hojas de estilo externas y alguna otra solución de dónde toDataURL fallará (por ejemplo, elementos externos a los que se hace referencia a través de xlink:href atributo xlink:href o <funciri> ).

Aquí está la función que escribí para analizar el contenido de las imágenes:

function parseImages(){
var xlinkNS = "http://www.w3.org/1999/xlink";
var total, encoded;
// convert an external bitmap image to a dataURL
var toDataURL = function (image) {
var img = new Image();
// CORS workaround, this won''t work in IE<11
// If you are sure you don''t need it, remove the next line and the double onerror handler
// First try with crossorigin set, it should fire an error if not needed
img.crossOrigin = ''Anonymous'';
img.onload = function () {
// we should now be able to draw it without tainting the canvas
var canvas = document.createElement(''canvas'');
canvas.width = this.width;
canvas.height = this.height;
// draw the loaded image
canvas.getContext(''2d'').drawImage(this, 0, 0);
// set our <image>''s href attribute to the dataURL of our canvas
image.setAttributeNS(xlinkNS, ''href'', canvas.toDataURL());
// that was the last one
if (++encoded === total) exportDoc();
};
// No CORS set in the response
img.onerror = function () {
// save the src
var oldSrc = this.src;
// there is an other problem
this.onerror = function () {
console.warn(''failed to load an image at : '', this.src);
if (--total === encoded && encoded > 0) exportDoc();
};
// remove the crossorigin attribute
this.removeAttribute(''crossorigin'');
// retry
this.src = '''';
this.src = oldSrc;
};
// load our external image into our img
img.src = image.getAttributeNS(xlinkNS, ''href'');
};
// get an external svg doc to data String
var parseFromUrl = function(url, element){
var xhr = new XMLHttpRequest();
xhr.onload = function(){
if(this.status === 200){
var response = this.responseText || this.response;
var dataUrl = ''data:image/svg+xml; charset=utf8, '' + encodeURIComponent(response);
element.setAttributeNS(xlinkNS, ''href'', dataUrl);
if(++encoded === total) exportDoc();
}
// request failed with xhr, try as an <img>
else{
toDataURL(element);
}
};
xhr.onerror = function(){toDataURL(element);};
xhr.open(''GET'', url);
xhr.send();
};
var images = svg.querySelectorAll(''image'');
total = images.length;
encoded = 0;
// loop through all our <images> elements
for (var i = 0; i < images.length; i++) {
var href = images[i].getAttributeNS(xlinkNS, ''href'');
// check if the image is external
if (href.indexOf(''data:image'') < 0){
// if it points to another svg element
if(href.indexOf(''.svg'') > 0){
parseFromUrl(href, images[i]);
}
else // a pixel image
toDataURL(images[i]);
}
// else increment our counter
else if (++encoded === total) exportDoc();
}
// if there were no <image> element
if (total === 0) exportDoc();
}

Aquí el svgDoc se llama svg ,
y la función exportDoc() podría escribirse simplemente como:

var exportDoc = function() {
// check if our svgNode has width and height properties set to absolute values
// otherwise, canvas won''t be able to draw it
var bbox = svg.getBoundingClientRect();
if (svg.width.baseVal.unitType !== 1) svg.setAttribute(''width'', bbox.width);
if (svg.height.baseVal.unitType !== 1) svg.setAttribute(''height'', bbox.height);
// serialize our node
var svgData = (new XMLSerializer()).serializeToString(svg);
// remember to encode special chars
var svgURL = ''data:image/svg+xml; charset=utf8, '' + encodeURIComponent(svgData);
var svgImg = new Image();
svgImg.onload = function () {
var canvas = document.createElement(''canvas'');
// IE11 doesn''t set a width on svg images...
canvas.width = this.width || bbox.width;
canvas.height = this.height || bbox.height;
canvas.getContext(''2d'').drawImage(svgImg, 0, 0, canvas.width, canvas.height);
doSomethingWith(canvas)
};
svgImg.src = svgURL;
};

Pero una vez más, primero deberá agregar su svg al documento (ya sea a través de xhr o en un elemento <iframe> o <object> , y deberá asegurarse de que todos sus recursos cumplan con CORS (o del mismo dominio ) para obtener estos renderizados.

var svg = document.querySelector(''svg'');
var doSomethingWith = function(canvas) {
document.body.appendChild(canvas)
};
function parseImages() {
var xlinkNS = "http://www.w3.org/1999/xlink";
var total, encoded;
// convert an external bitmap image to a dataURL
var toDataURL = function(image) {
var img = new Image();
// CORS workaround, this won''t work in IE<11
// If you are sure you don''t need it, remove the next line and the double onerror handler
// First try with crossorigin set, it should fire an error if not needed
img.crossOrigin = ''anonymous'';
img.onload = function() {
// we should now be able to draw it without tainting the canvas
var canvas = document.createElement(''canvas'');
canvas.width = this.width;
canvas.height = this.height;
// draw the loaded image
canvas.getContext(''2d'').drawImage(this, 0, 0);
// set our <image>''s href attribute to the dataURL of our canvas
image.setAttributeNS(xlinkNS, ''href'', canvas.toDataURL());
// that was the last one
if (++encoded === total) exportDoc();
};
// No CORS set in the response
img.onerror = function() {
// save the src
var oldSrc = this.src;
// there is an other problem
this.onerror = function() {
console.warn(''failed to load an image at : '', this.src);
if (--total === encoded && encoded > 0) exportDoc();
};
// remove the crossorigin attribute
this.removeAttribute(''crossorigin'');
// retry
this.src = '''';
this.src = oldSrc;
};
// load our external image into our img
var href = image.getAttributeNS(xlinkNS, ''href'');
// really weird bug that appeared since this answer was first posted
// we need to force a no-cached request for the crossOrigin be applied
img.src = href + (href.indexOf(''?'') > -1 ? + ''&1'': ''?1'');
};
// get an external svg doc to data String
var parseFromUrl = function(url, element) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if (this.status === 200) {
var response = this.responseText || this.response;
var dataUrl = ''data:image/svg+xml; charset=utf8, '' + encodeURIComponent(response);
element.setAttributeNS(xlinkNS, ''href'', dataUrl);
if (++encoded === total) exportDoc();
}
// request failed with xhr, try as an <img>
else {
toDataURL(element);
}
};
xhr.onerror = function() {
toDataURL(element);
};
xhr.open(''GET'', url);
xhr.send();
};
var images = svg.querySelectorAll(''image'');
total = images.length;
encoded = 0;
// loop through all our <images> elements
for (var i = 0; i < images.length; i++) {
var href = images[i].getAttributeNS(xlinkNS, ''href'');
// check if the image is external
if (href.indexOf(''data:image'') < 0) {
// if it points to another svg element
if (href.indexOf(''.svg'') > 0) {
parseFromUrl(href, images[i]);
} else // a pixel image
toDataURL(images[i]);
}
// else increment our counter
else if (++encoded === total) exportDoc();
}
// if there were no <image> element
if (total === 0) exportDoc();
}
var exportDoc = function() {
// check if our svgNode has width and height properties set to absolute values
// otherwise, canvas won''t be able to draw it
var bbox = svg.getBoundingClientRect();
if (svg.width.baseVal.unitType !== 1) svg.setAttribute(''width'', bbox.width);
if (svg.height.baseVal.unitType !== 1) svg.setAttribute(''height'', bbox.height);
// serialize our node
var svgData = (new XMLSerializer()).serializeToString(svg);
// remember to encode special chars
var svgURL = ''data:image/svg+xml; charset=utf8, '' + encodeURIComponent(svgData);
var svgImg = new Image();
svgImg.onload = function() {
var canvas = document.createElement(''canvas'');
// IE11 doesn''t set a width on svg images...
canvas.width = this.width || bbox.width;
canvas.height = this.height || bbox.height;
canvas.getContext(''2d'').drawImage(svgImg, 0, 0, canvas.width, canvas.height);
doSomethingWith(canvas)
};
svgImg.src = svgURL;
};
window.onload = parseImages;

canvas {
border: 1px solid green !important;
}

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<pattern id="Pattern" x="0" y="0" width=".25" height=".25">
<image xlink:href="https://dl.dropboxusercontent.com/s/1alt1303g9zpemd/UFBxY.png" width="100" height="100"/>
</pattern>
</defs>
<rect fill="url(#Pattern)" x="0" y="0" width="200" height="200"/>
</svg>