關於svg轉換在vue中（轉換svg/base64）

關於svg：可縮放矢量圖形，使用XMl格式定義圖像。

看到此篇文章的你，已經會使用svg最基本的用法;

在網上找到了一個插件，很輕易的就可以完成：canvg

01、安裝

cnpm install canvg
cnpm install canvg@2.0.0-beta.1 canvas@^2 jsdom@^13 xmldom@^0

02、引入

在需要使用的地方引入或者在main里，我用到的是當前引入：
import canvg from "canvg";

03、使用

html;

<svg ref="elSvg">

 

js:

在methods:{
    handleChange() {
    let svgXml = new XMLSerializer().serializeToString(this.$refs.elSvg);//在svg標簽上 用ref=elSvg
    console.log(svgXml); //處理svg傳給canvg的格式(這里會輸出傳給后端的字段)
    let canvas = document.createElement("canvas"); //頁面創建空canvas
    canvg(canvas, svgXml); //進行轉換
    let ahref = document.createElement("a");
    ahref.href = canvas.toDataURL("image/png");
    ahref.download = "exportPng";
    ahref.click();
    },

}

希望有所幫助！！

參考鏈接：https://github.com/canvg/canvg