php svg轉base64,關于svg轉換在vue中（轉換svg/base64）

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

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

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

01、安裝

cnpm install canvg

cnpm install [email protected] [email protected]^2 [email protected]^13 [email protected]^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();

},

}

希望有所幫助！！

标簽：canvas,vue,轉換,svg,svgXml,let,ahref,canvg

來源： https://www.cnblogs.com/mm-zz/p/10785743.html