zoukankan      html  css  js  c++  java
  • 关于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

  • 相关阅读:
    Java学习笔记
    JSP/Servlet笔记
    JavaScript笔记
    JavaScript笔记
    JavaScript笔记 – 程序语法设计
    Mybatis笔记
    Mybatis笔记
    Mybatis笔记 – 关联查询
    Mybatis笔记 – Po映射类型
    Mybatis笔记
  • 原文地址:https://www.cnblogs.com/mm-zz/p/10785743.html
Copyright © 2011-2022 走看看