<!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>
SVG转png图片并下载
于 2022-07-29 15:01:02 首次发布