<template>
<div class="test">
<canvas
id="canvas"
width="800"
height="600"
ref="canvas"
@mousedown="canvasDown($event)"
@mouseup="canvasUp($event)"
@mousemove="canvasMove($event)"
></canvas>
<img :src="signSrc" alt="" />
<el-button type="danger" @click="penClick">画笔</el-button>
<el-button type="danger" @click="rectangleClick">矩形</el-button>
<el-button type="danger" @click="roundClick">圆形</el-button>
<el-button type="danger" @click="resetCanvas">清空画布</el-button>
<el-button type="danger" @click="revoke">撤销</el-button>
<el-button type="danger" @click="saveImg">保存图片</el-button>
</div>
</template>
<script>
export default {
components: {},
data () {
return {
flag: false, // 是否绘制
// imgUrl: require('@/assets/demo.png'),
imgUrl:
'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
img: new Image(), // 背景图片缓存
context: {}, // canvas对象
oldX: 0, // 第一次点击X轴
oldY: 0, // 第一次点击Y轴
penDraw: false, // 画笔工具是否启用
rectangleDraw: false, // 矩形工具是否启用
roundDraw: false, // 圆形工具是否启用
history: [], // 存储每次操作
signSrc: '' // 保存的图片地址
}
},
mounted () {
this.initDraw()
},
methods: {
initDraw () {
// 初始化画布
const canvas = this.$refs.canvas
this.context = canvas.getContext('2d')
this.img.src = this.imgUrl
this.img.crossOrigin = 'anonymous'
this.$nextTick(() => {
this.context.drawImage(this.img, 0, 0, 800, 600)
})
// this.img.onload = () => {
// this.context.drawImage(this.img, 0, 0, this.width, this.height)
// }
this.context.lineWidth = 3 // 画笔粗细
this.context.strokeStyle = '#FF0000' // 画笔颜色
},
// 点击画笔
penClick () {
this.penDraw = true
this.rectangleDraw = false
this.roundDraw = false
},
// 点击矩形
rectangleClick () {
this.penDraw = false
this.rectangleDraw = true
this.roundDraw = false
},
// 点击圆形
roundClick () {
this.penDraw = false
this.rectangleDraw = false
this.roundDraw = true
},
// 保存图片
saveImg () {
// location.href = this.$refs.canvas.toDataURL().replace('image/png', 'image/stream')
const imgBase64 = this.$refs.canvas.toDataURL('image/png')
this.signSrc = imgBase64
},
resetCanvas () {
// 清空画布
this.context.clearRect(0, 0, 800, 600) // 清空
this.flag = false
this.history.length = 0 // 清空记录
this.initDraw()
},
// 撤销
revoke () {
this.history.pop()
if (this.history.length > 0) {
// 从存入的记录里删除
this.context.putImageData(this.history[this.history.length - 1], 0, 0)
}
},
// 绘制铅笔
pencil (e) {
const newx = e.pageX
const newy = e.pageY
this.context.lineTo(newx, newy)
this.context.stroke()
},
// 绘制矩形
rectangle (e) {
const newX = e.pageX
const newY = e.pageY
this.context.beginPath()
this.context.rect(this.oldX, this.oldY, newX - this.oldX, newY - this.oldY)
this.context.stroke()
},
// 绘制圆形
round (e) {
const newX = e.pageX
const newY = e.pageY
this.context.beginPath()
var r = Math.sqrt(Math.pow(newX - this.oldX, 2), Math.pow(newY - this.oldY), 2)
this.context.arc(this.oldX, this.oldY, r, 0, 2 * Math.PI)
this.context.closePath()
this.context.stroke()
},
// 鼠标落下
canvasDown (e) {
this.context.beginPath() // 分开路径,开始一个新的路径
this.flag = true // 开始绘制
// 获取鼠标起始位置
this.oldX = e.pageX
this.oldY = e.pageY
},
// 鼠标滑动
canvasMove (e) {
if (this.flag === true) {
if (this.history.length > 0) {
// history数组的长度大于0,才可以putImageData()
this.context.putImageData(
this.history[this.history.length - 1],
0,
0
)
} else {
this.history.push(this.context.getImageData(0, 0, 800, 600))
}
// 执行画笔
if (this.flag === true && this.penDraw === true) {
this.pencil(e)
}
// 执行矩形
if (this.flag === true && this.rectangleDraw === true) {
this.rectangle(e)
}
// 执行圆形
if (this.flag === true && this.roundDraw === true) {
this.round(e)
}
}
},
// 鼠标抬起
canvasUp (e) {
console.log(e)
// getImageData() 方法返回 ImageData 对象,该对象拷贝了画布指定矩形的像素数据。
this.history.push(this.context.getImageData(0, 0, 800, 600))
this.flag = false
}
}
}
</script>
<style lang="less" scoped></style>
vue canvas 画笔 矩形 圆形 清空画布 撤销 保存图片
最新推荐文章于 2024-06-07 09:59:54 发布