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

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

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

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

0一、安裝

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

0二、引入

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

0三、使用

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