基于Vue+Canvas实现的画板绘画以及保存功能
本文内容设计到的画板的js部分内容来源于灵感来源引用地址，然后我在此基础上，根据自己的需求做了修改，增加了其他功能。
下面展示了完整的前后端代码
1. board-js.js
这个代码，接收一个容器参数，创建了一个画板类，里面实现了画板会用到的基本方法，保存到单独的js文件，在vue文件中导入，创建一个画板对象。
Canvas直接使用canvas.toDataURL()保存的图片是没有背景的，因为默认的是png，所以需要开始绘画之前先填充背景，下面代码做出了修改，在init（）函数中。
代码中用到的Canvas的原生API的作用，可以参考这里Canvas参考手册
export default class BoardCanvas {
constructor(container) {
// 容器
this.container = container
// canvas画布
this.canvas = this.createCanvas(container)
// 绘制工具
this.ctx = this.canvas.getContext('2d')
// 起始点位置
this.startX = 0
this.stateY = 0
// 画布历史栈
this.pathSegmentHistory = []
this.index = 0
// 初始化
this.init()
}
// 创建画布
createCanvas(container) {
const canvas = document.createElement('canvas')
canvas.width = container.clientWidth
canvas.height = container.clientHeight
canvas.style.display = 'block'
canvas.style.backgroundColor = 'white'
container.appendChild(canvas)
return canvas
}
// 初始化
init() {
this.addPathSegment()
this.setContext2DStyle()
//下面两行，原文件是没有的，如果没有会导致保存的图片没有背景，只有绘画轨迹
this.ctx.fillStyle = "#ffffff";
this.ctx.fillRect(0, 0,this.canvas.width, this.canvas.height);
this.canvas.addEventListener('contextmenu', e => e.preventDefault())
this.canvas.addEventListener('mousedown', this.mousedownEvent.bind(this))
window.document.addEventListener('keydown', this.keydownEvent.bind(this))
}
// 设置画笔样式
setContext2DStyle() {
this.ctx.strokeStyle = 'black'
this.ctx.lineWidth = 3
this.ctx.lineCap = 'round'
this.ctx.lineJoin = 'round'
}
// 鼠标事件
mousedownEvent(e) {
const that = this
const ctx = this.ctx
ctx.beginPath()
ctx.moveTo(e.offsetX, e.offsetY)
ctx.stroke()
this.canvas.onmousemove = function (e) {
ctx.lineTo(e.offsetX, e.offsetY)
ctx.stroke()
}
this.canvas.onmouseup = this.canvas.onmouseout = function () {
that.addPathSegment()
this.onmousemove = null
this.onmouseup = null
this.onmouseout = null
}
}
// 键盘事件
keydownEvent(e) {
if(!e.ctrlKey) return
switch(e.keyCode) {
case 90:
this.undo()
break
case 89:
this.redo()
break
}
}
// 添加路径片段
addPathSegment() {
const data = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height)
// 删除当前索引后的路径片段，然后追加一个新的路径片段，更新索引
this.pathSegmentHistory.splice(this.index + 1)
this.pathSegmentHistory.push(data)
this.index = this.pathSegmentHistory.length - 1
}
// 撤销
undo() {
if(this.index <= 0) return
this.index--
this.ctx.putImageData(this.pathSegmentHistory[this.index], 0, 0)
}
// 恢复
redo() {
if(this.index >= this.pathSegmentHistory.length - 1) return
this.index++
this.ctx.putImageData(this.pathSegmentHistory[this.index], 0, 0)
}
//获取画布内容
getImage() {
return this.canvas.toDataURL();
}
//清空画板
cleanboard(){
this.ctx.fillStyle = "#ffffff";
this.ctx.fillRect(0, 0,this.canvas.width, this.canvas.height);
}
}
2. 前端的vue文件
<template>
<el-container direction="vertical" style="height: 100%;width: 100%">
<!--头顶布局，用户操作提示语-->
<el-header height="10%">
<h2>在空白处进行绘画</h2>
</el-header>
<!--中间布局 -->
<div style=display:flex;justify-content:center;align-items:center;>
<!--中间画板-->
<div class="drawing-board"
style="width:66%;height:600px;border: 1px black solid;margin-left: 10px">
<div id="container" ref="container" style="width: 100%; height: 100%"></div>
</div>
</div>
<!--底部按钮-->
<el-footer style="height: 300px;margin-top: 25px">
<el-button type="primary" round @click="savedrawing">保存</el-button>
</el-footer>
</el-container>
</template>
//这里使用的vue的setup语法糖，所以data和method不需要封装，直接用
<script setup>
import {
ref, onMounted } from 'vue'
import Board from '@/js/drawing-board.js'
import axios from "axios";
const container = ref(null)
let drawboard = null;
onMounted(() => {
// 新建一个画板
drawboard=new Board(container.value)
})
function savedrawing() {
const drawdata = drawboard.getImage();
let formdata = new FormData();
const timestamp = (new Date()).valueOf();
let filename = timestamp;
formdata.append("drawPictureId",filename);
formdata.append("drawPictureData",drawdata.substring(22));
axios({
method:"post",
url:"/savedrawdata",
baseURL:"http://localhost:9999",
data:formdata,
contentType:false,
processData:false
}).then(response=>{
if(response.status===200){
alert("保存成功!")
}
}).catch(error=>{
console.log(error);
})
}
</script>
3. 后端Controller
Controller文件中，前端使用FormData格式传递参数，就相当于是个map键值对，所以在参数这里，使用 @RequestParam() ,取出表单中的值，括号中的字符串，是在前端传入的，表示将该key对应的value，赋值给后面的String 参数。
其次，这里注意Canvas得到的图片是经过base64编码过的，所以先解码成字节数组
@RequestMapping("/savedrawdata")
public ResponseEntity<?> savedrawdata(@RequestParam("drawPictureId")String drawPictureId,
@RequestParam("drawPictureData")String drawPictureData){
try {
// 解码前端传过来的base64编码
byte[] imageBytes = Base64.decodeBase64(drawPictureData);
// 将字节流转为图片缓冲流
BufferedImage bufferedImage = ImageIO.read(new ByteArrayInputStream(imageBytes));
// 保存为png
File output = new File("F:\\image\\" + drawPictureId + ".png");
ImageIO.write(bufferedImage, "png", output);
} catch (IOException e) {
e.printStackTrace();
}
System.out.println(rawPictureId);
System.out.println(drawPictureId);
return ResponseEntity.ok(HttpStatus.OK);
}
