Несколько дней назад у меня была такая же проблема. На самом деле мне нужно было преобразовать svg, содержащий изображения: в этом случае нам нужно вручную экспортировать каждое изображение в Base64. Однако приведенный ниже фрагмент должен работать и в вашем случае. Я использовал библиотеку Raphael.Export, чтобы получить SVG.
var svgData = r.paper.toSVG(), //Obtaining the SVG element
parser = new DOMParser(),
//converting the svg in a DOM object
doc = parser.parseFromString(svgData, "text/xml");
//Getting all the images element in the SVG
var images = doc.querySelectorAll( "image" );
var canvas = document.createElement('canvas');
var ctx = canvas.getContext( "2d" );
var i, imgArr = new Array();
for(i=0; i<images.length; i++){
//for each image element, i need to obtain its Base64 representation
imgArr[i] = document.createElement("img");
imgArr[i].setAttribute( "src", images[i].href.baseVal);
imgArr[i].onload = function(i, images){
return function() {
ctx.drawImage( imgArr[i], 0, 0 );
// Replace the image href with its base64 representation
svgData = svgData.replace(images[i].href.baseVal,canvas.toDataURL( "image/png" ));
//if i'm converting the last element, create the img result
if(i==images.length-1){
var img = document.createElement('img'), canv = document.getElementById('myCanvas');
//generating the result svg image
img.setAttribute( "src", "data:image/svg+xml;base64," + btoa(svgData));
var context= canv.getContext( "2d" );
//when the img ready, we can obtain the png
img.onload = function() {
context.drawImage( img, 0, 0 );
var canvasdata = canv.toDataURL("image/png");
var pngimg = document.getElementById( "myImg" );
pngimg.setAttribute( "src", canvasdata);
//now pngimg contains the resulting image
};
}
}
}(i, images);
}
И внутри вашего html-документа вам нужен тег img с id="myImg"
Я надеюсь, что это могло помочь :)
person
giacomolm
schedule
25.04.2014
<div id="qrcode"> <svg height="250" version="1.1" width="250" xmlns="http://www.w3.org/2000/svg" style="overflow:hidden;position:relative">
Я заметил, что SVG вложен в div qrcode, и это основная проблема, которую я не могу получить SVG с идентификатором qrcode! - person Kristina Chappell   schedule 13.04.2013document.getElementsByTagName('svg')[0].id = 'id_something';
и установите тег svg с идентификатором что-то, затем, используяcanvg(canvas, svg);
иvar img_url = canvas.toDataURL('image/png');
, вы получите нужный png-файл. Правильно ли я поступаю? Спасибо, - person Kristina Chappell   schedule 13.04.2013