Невозможно сгенерировать png из svg из-за атрибута transform с использованием angular5 и javascript - PullRequest
Новая
       12

Невозможно сгенерировать png из svg из-за атрибута transform с использованием angular5 и javascript

0 голосов
/ 17 декабря 2018

Я не могу сгенерировать png из svg, созданного в приложении из-за атрибута transform.Если в преобразовании нет никакой ценности, я получаю svg.С этой проблемой я сталкиваюсь в IE11.

    let targetElem = <any>document.getElementById('body');
    let nodesToRecover = [];
    let nodesToRemove = [];

    let svgElem = targetElem.querySelector('svg#svg-annotations')

    let parentNode = svgElem.parentNode;
        // let svg = parentNode.innerHTML.trim();
        let svg = '<svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" transform="translate(295 157)" fill="yellow" /> </svg>';
        this.canvas = document.createElement('canvas');
        this.canvas.setAttribute('id', '_canvas' + this.counter);

        canvg(this.canvas, svg);

        parentNode.appendChild(this.canvas);
        let data = this.canvas.toDataURL('image/png', 0.5);
        console.log(data);
        let blobData = this.base64toBlob(data.split(',')[1], 'image/png');
        saveAs(blobData, 'myblob.png');
        console.log(blobData);
        this.counter++;

Может кто-нибудь помочь мне, как решить эту проблему с преобразованием?Любая помощь будет очень оценена.

1 Ответ

0 голосов
/ 18 декабря 2018

эта проблема решена путем установки ширины и высоты до необходимого значения.проблема была в том, что значение свойства translate равно 297, 195, что больше заданной ширины и высоты.

...