SVG转png图片并下载

IT码农-爱吃辣条

已于 2022-07-29 15:01:31 修改

阅读量522

点赞数

文章标签： javascript 前端 css

于 2022-07-29 15:01:02 首次发布

本文链接：https://blog.csdn.net/qq_24504591/article/details/126056129

版权

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg转png</title>
  <!-- 引入样式 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/theme-chalk/index.min.css" rel="stylesheet">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    /* 取消input的上下箭头 */
    input::-webkit-inner-spin-button {
      -webkit-appearance: none !important;
    }

    input::-webkit-outer-spin-button {
      -webkit-appearance: none !important;
    }

    /*里面的代码可以根据自己需求去进行更改*/
    /* 设置滚动条的样式 */
    ::-webkit-scrollbar {
      width: 5px;
    }

    /* 滚动槽 */
    ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    /* 滚动条滑块 */
    ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.1);
      -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
    }

    ::-webkit-scrollbar-thumb:window-inactive {
      background-color: rgb(221, 222, 225);
    }

    input[type="number"] {
      -moz-appearance: textfield;
    }

    #app {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100vh;
      padding: 10px;
      box-sizing: border-box;
    }

    .svg-container {
      width: 100%;
      height: 100%;
      overflow: auto;
    }
  </style>
</head>

<body>
  <div id="app">
    <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="svgHtml" style="margin-bottom: 8px;" clearable
      @input="textareaChange">
    </el-input>
    <el-form ref="form" inline>
      <el-form-item label="图片名称：">
        <el-input v-model="svgName" placeholder="默认【示例名称】" clearable></el-input>
      </el-form-item>
      <el-form-item label="图片宽度：">{{width}}</el-form-item>
      <el-form-item label="图片高度:">{{height}}</el-form-item>
      <el-button type="primary" @click="handleExportPng">导出png图片</el-button>
    </el-form>
    <div class="svg-container" id="svgContainer" v-html="svgHtml"></div>
  </div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: function () {
      return {
        svgName: '',
        svgHtml: '',
        width: '',
        height: ''
      }
    },
    methods: {
      textareaChange() {
        this.$nextTick(() => {
          let d = document.querySelector('#svgContainer').children[0]
          let s = /name="(\S+)"/g.exec(this.svgHtml)
          this.svgName = s && s[1] ? s[1] : ''
          this.width = d.clientWidth
          this.height = d.clientHeight
        })
      },
      handleExportPng() {
        let d = document.querySelector('#svgContainer').children[0]
        this.covertSVG2Image(d, this.svgName || '示例名称', this.width, this.height)
      },
      /**

        * 将svg导出成图片

        * @param node svg节点 => document.querySelector('svg')

        * @param name 生成的图片名称

        * @param width 生成的图片宽度

        * @param height 生成的图片高度

        * @param type 生成的图片类型

        */
      covertSVG2Image(node, name, width, height, type = 'png') {

        let serializer = new XMLSerializer()

        let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)

        let image = new Image()

        image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)

        let canvas = document.createElement('canvas')

        canvas.width = width

        canvas.height = height

        let context = canvas.getContext('2d')

        context.fillStyle = '#fff'

        context.fillRect(0, 0, 10000, 10000)

        image.onload = function () {

          context.drawImage(image, 0, 0)

          let a = document.createElement('a')

          a.download = `${name}.${type}`

          a.href = canvas.toDataURL(`image/${type}`)

          a.click()

        }

      },
    }
  })
</script>

</html>