Почему изображение сохраняется черно-белым?

Question

[Andrey Kovalchuk]

Добрый день.

Не могу добавить цвета в изображение. Должно быть цветное, сохраняется черно-белое. Не могу придумать, от чего так.

JS код svg to png:

d3.select('#saveButton').on('click', function(){
            var svg = document.querySelector('svg');
            var svgString = getSVGString(svg);
	        svgString2Image( svgString, 2*dim.width, 2*dim.height, 'png');
        });

        // Below are the functions that handle actual exporting:
        // getSVGString ( svgNode ) and svgString2Image( svgString, width, height, format, callback )
        function getSVGString( svgNode ) {
            svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');

            var serializer = new XMLSerializer();
            var svgString = serializer.serializeToString(svgNode);
            svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink='); // Fix root xlink without namespace
            svgString = svgString.replace(/NS\d+:href/g, 'xlink:href'); // Safari NS namespace fix

            return svgString;

        }


        function svgString2Image( svgString, width, height, format, callback ) {
            var format = format ? format : 'png';
            var blob = new Blob([ svgString], { type: 'image/svg+xml' });
            var imgsrc = 'data:image/svg+xml;base64,'+ btoa( unescape( encodeURIComponent( svgString ) ) ); // Convert SVG string to data URL

            var url = window.URL.createObjectURL(blob);

            var image = new Image();


            var canvas = document.createElement("canvas");
            var context = canvas.getContext("2d");

            canvas.width = width;
            canvas.height = height;


            image.onload = function() {
                context.drawImage(image, 0, 0, width, height);
                var canvasUrl = canvas.toDataURL("image/png");
                canvas.remove();

                send_data(canvasUrl)
            };
            image.src =  url;

        }

Сохраняем изображение:

data = request.POST['img_data'][22:]
        data = base64.b64decode(data)
        # with open("imageToSave5.png", "wb") as fh:
        #    fh.write(data)
        # print(data)

        # data = data.encode()

        file = io.BytesIO(data)
        img = PIL.Image.open(file, 'r',)
        img.convert(mode='RGB', colors=256)
        img.save('test1.png')

        data = {'status': 'success'}

        return JsonResponse(data)

То, что хочу сохранить:


То, как сохраняется:

Answer 1

[trushka]

Скорее всего стили для svg, с цветами, прописаны где-то вне его (в библиотеке, рисующей график?), соответственно не сохраняются. Надо найти где они находятся и вставить в svg в тэг <style> Точнее, в svgString

Comments

[Andrey Kovalchuk]

Стили подключены в .css недостаточно? Не совсем понял

Точнее, в svgString

, это т.е. куда?

[trushka]

ну, типа

svgString.replace('</svg>', '<style>[импортированный стиль]</style></svg>')

Если стиль в отдельном файле - можно попробовать использовать @import url("адрес css-файла");

[Andrey Kovalchuk]

trushka: Спасибо, решил несколько иначе. Нашел и поправил скрипт загрузки и добавления стилей в svg.

Выложу, может кому пригодиться:

function getSVGString( svgNode ) {
            svgNode.setAttribute('xlink', 'http://www.w3.org/1999/xlink');
            var cssStyleText = getCSSStyles( svgNode.parentElement );
            appendCSS( cssStyleText, svgNode );

            var serializer = new XMLSerializer();
            var svgString = serializer.serializeToString(svgNode);
            svgString = svgString.replace(/(\w+)?:?xlink=/g, 'xmlns:xlink='); // Fix root xlink without namespace
            svgString = svgString.replace(/NS\d+:href/g, 'xlink:href'); // Safari NS namespace fix

            return svgString;

            function getCSSStyles( parentElement ) {
                var selectorTextArr = [];

                // Add Parent element Id and Classes to the list
                selectorTextArr.push( '#'+parentElement.id );
                for (c = 0; c < parentElement.classList.length; c++)
                        if ( !contains('.'+parentElement.classList[c], selectorTextArr) )
                            selectorTextArr.push( '.'+parentElement.classList[c] );

                // Add Children element Ids and Classes to the list
                var nodes = parentElement.getElementsByTagName("*");
                for (i = 0; i < nodes.length; i++) {
                    var id = nodes[i].id;
                    if ( !contains('#'+id, selectorTextArr) )
                        selectorTextArr.push( '#'+id );

                    var classes = nodes[i].classList;
                    for (var c = 0; c < classes.length; c++)
                        if ( !contains('.'+classes[c], selectorTextArr) )
                            selectorTextArr.push( '.'+classes[c] );
                }

                // Extract CSS Rules
                i = 0;
                var extractedCSSText = "";
                for (i; i < document.styleSheets.length; i++) {
                    var s = document.styleSheets[i];
                    try {
                        if(!s.cssRules) continue;
                    } catch( e ) {
                            if(e.name !== 'SecurityError') throw e; // for Firefox
                            continue;
                        }
                    var cssRules = s.cssRules;
                    for (var r = 0; r < cssRules.length; r++) {
                        if ( contains( cssRules[r].selectorText, selectorTextArr ) )
                            extractedCSSText += cssRules[r].cssText;
                    }
                }
                return extractedCSSText;
                function contains(str,arr) {
                    return arr.indexOf( str ) === -1;
                }
            }
            function appendCSS( cssText, element ) {
                var styleElement = document.createElement("style");
                styleElement.setAttribute("type","text/css");
                styleElement.innerHTML = cssText;
                var refNode = element.hasChildNodes() ? element.children[0] : null;
                element.insertBefore( styleElement, refNode );
            }
}

Но, вернемся к сути. Вы были абсолютно правы! Огромное спасибо!

Answer 2

[Sergey Lerg]

Вы не можете отправлять просто SVG? Для питона есть библиотека cairo для рендеринга SVG в PNG.

Comments

[Andrey Kovalchuk]

SVG тоже черный