Question

是否可以在角度项目中将SVG图像转换为PNG格式？

我找到了这个库save-svg-as-png，但是它需要一个svg canvas的ID。而在我的代码中，我正在显示带有img标签的SVG图片：

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

是否可以访问图像内部的内嵌svg，或可以在其中提供svg图像的URL而不是画布ID的另一个库？

PS：我发现像svg2png和convert-svg-to-png这样的库将svg的路径作为参数，但是它们都依赖于nodejs。

Answer 1

与angular-svg-icon一起度过了一天。

在我的HTML中，我以这种方式显示了svg图片：

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

在打字稿中，我这样调用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方法会保存一个名为pngtest.png的新png文件

根据图像路径将SVG转换为PNG

1 个答案: