关于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