Сохраните svg (в div) в png или конвертируйте в png. Рафаэль Дж.С.

Я новичок в Raphaël и javascript, и у меня возник вопрос о том, как сохранить svg (в div) в png с помощью Javascript. Я прочитал множество статей: например, об использовании canvg https://code.google.com/p/canvg/ и canvas.toDataURL('image/png'); ..etc, но пока не знаю, как это сделать.

Я пытаюсь преобразовать вывод qrcodesvg.js (http://vp-dev.net/qrcodesvg/) в некоторые загружаемые/читаемые форматы png/изображений на стороне клиента. Может ли кто-нибудь дать мне несколько советов, на какие или какие основные ссылки смотреть? Спасибо!

С уважением,


person Kristina Chappell    schedule 12.04.2013    source источник
comment
возможный дубликат Преобразование SVG в изображение (JPEG, PNG, и т. д.) в браузере   -  person Robert Longson    schedule 13.04.2013
comment
Спасибо, Роберт. Но я прочитал эту статью, прежде чем опубликовать эту (не могу публиковать более двух ссылок). Хорошо, и я обнаружил скрытый тег Html SVG с помощью Opera Dragonfly: <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.2013
comment
Хорошо, вот обновление: просто используйте getElementsByTagName document.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


Ответы (1)


Несколько дней назад у меня была такая же проблема. На самом деле мне нужно было преобразовать 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