Сгенерированное html2canvas изображение не выбирает svg на диаграмме

Я использовал значки svg в своем приложении и использовал svg для рисования диаграмм. Когда я генерирую изображение с помощью html2canvas, все svgs игнорируются, а изображение генерируется без всех svgs.

Я использую функцию ниже для создания изображения.

function svgToCanvas (targetElem) {
        var nodesToRecover = [];
        var nodesToRemove = [];

        var svgElem = targetElem.find('svg');

        svgElem.each(function(index, node) {
            var parentNode = node.parentNode;
            var svg = parentNode.innerHTML;

            var canvas = document.createElement('canvas');

            canvg(canvas, svg);

            nodesToRecover.push({
                parent: parentNode,
                child: node
            });
            parentNode.removeChild(node);

            nodesToRemove.push({
                parent: parentNode,
                child: canvas
            });

            parentNode.appendChild(canvas);
        });

        html2canvas(targetElem, {
            allowTaint: true,
            onrendered: function(canvas) {
                // var ctx = canvas.getContext('2d');
                // ctx.webkitImageSmoothingEnabled = false;
                // ctx.mozImageSmoothingEnabled = false;
                // ctx.imageSmoothingEnabled = false;

                var img_PNG = Canvas2Image.saveAsPNG(canvas);
            }
        });
    }

Эта функция называется так svgToCanvas($("#app-container"));

Заранее спасибо.


person Desert Rose    schedule 19.01.2015    source источник


Ответы (2)


Я забыл ответить на этот вопрос. Кто-то проголосовал за мой вопрос, так что он пришел мне в голову.

На самом деле html2canvas преобразуется в изображение, но не выбирает стиль SVG, поскольку он был написан в другом файле css. Поэтому, если вы хотите получить стили SVG в изображении, вам должны задать стиль внутри тегов. Тогда вы получите законченное и красочное изображение.

Надеюсь, что это поможет вам.

person Desert Rose    schedule 03.12.2015

JavaScript передает объекты по ссылке (см. Передает ли Javascript по ссылке? или Является ли JavaScript передачей по ссылке или передачей по значению язык? для пояснений), что означает, что SVG редактируются parentNode.removeChild(node); внутри цикла svgElem.each до того, как html2canvas начнет с ними работать.

Однако изменение этого может не помочь - по моему опыту, html2canvas не отображает SVG. Это можно сделать вручную - вот ответ с исходным кодом, который может помочь вам добиться этого вручную: Ошибки стиля при преобразовании встроенного SVG в png

person HumanInDisguise    schedule 21.01.2015