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

 

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

转载于:https://www.cnblogs.com/mm-zz/p/10785743.html