Блог

Главная - Вопросы по программированию - Преобразование SVG в PNG на основе пути изображения

Преобразование SVG в PNG на основе пути изображения

#javascript #angular #svg

#javascript #угловой #svg

Вопрос:

Возможно ли преобразовать изображение SVG в формат PNG в проекте angular?

Я нашел эту библиотеку save-svg-as-png, но для этого требуется идентификатор svg canvas. В то время как в моем коде я отображаю изображение SVG с img тегом:

 <img src="path/to/mysvg/mysvg.svg">

Есть ли способ получить доступ к встроенному svg, который находится внутри изображения, или к другой библиотеке, где можно указать URL-адрес svg-изображения вместо идентификатора холста?

PS: Я нашел несколько библиотек, таких как svg2png и convert-svg-to-png, которые принимают путь к svg в качестве параметра, но они оба зависят от nodejs.

Комментарии:

1. Вы не можете просто дать ему идентификатор? Это единственное изображение? Это единственный SVG?

2. Я вижу, что его можно использовать следующим saveSvgAsPng(document.getElementById("diagram"), "diagram.png"); образом: вы можете использовать идентификатор / имя класса, что вам подходит, для выбора элемента.

3. Я присвоил изображению идентификатор и сначала попробовал document.getElementById("diagram") использовать, но метод saveSvgAsPng его не принял. Затем я попытался работать с nativeElement из ViewChild , но я получил ошибку an HTMLElement or SVGElement is required

Ответ №1:

Работа с angular-svg-icon спасла положение.

В моем HTML я отображал свое изображение svg таким образом:

 <svg-icon #mySVGImg src="path/to/mysvg/mysvg.svg" [svgStyle]="{ 'width.px':140, 'height.px':140 }"></svg-icon>

и в моем typescript я вызвал saveSvgAsPng метод следующим образом:

 import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import * as svg from 'save-svg-as-png';
// Other imports

@Component({
  //....
})
export class MyTSPage implements OnInit {

    @ViewChild("mySVGImg", { read: ElementRef }) mySVGImg: ElementRef;

    myConvertMethod() {
        svg.saveSvgAsPng(this.mySVGImg.nativeElement.querySelector("svg"), "pngtest.png");
    }
}

Вызывающий myConvertMethod метод сохранил новый файл png с именем pngtest.png