如何在一张图片上做涂鸦/涂抹，并支持导出相关轨迹图（内含在线演示地址）

一、支持的功能

1. 在图片上进行涂鸦
2. 支持撤回最近一次涂鸦操作
3. 支持清空画布
4. 支持将用户涂鸦的内容转成一张黑底白色轨迹
   

二、实现思路

Q1：如何在图片上实现涂鸦功能？

可以在元素上叠加一个元素。当图片的来源确定时，便设置的宽高和图片一致。然后通过绝对定位，让重叠在上。
然后，通过监听元素上的鼠标事件来进行涂鸦。当触发 mousedown 事件时，设置一个标志以开始绘制；然后，触发 mousemove 事件，根据鼠标的移动来绘制线条；并在触发 mouseup 事件时，停止绘制。
此时，我们在画布上绘制内容，用户视觉上就是在图片上绘制内容。

Q2：如何实现更改笔刷颜色和宽度功能？

创建一个名为 ctx 的常量保量，用于表示 Canvas 的 2D 绘图上下文（通过 getContext('2d') 方法获得）。这个上下文对象允许我们在 Canvas 上进行绘制操作。
笔刷的颜色和宽度分别由ctx.strokeStyle和 ctx.lineWidth控制。

Q3：如何实现撤回功能？

需要创建一个数组，用来存储绘图的历史记录。
比如说我们新建了 drawingHistory 数组来存储 Canvas 的状态，每当鼠标抬起时，将当前 Canvas 的数据 URL 存入数组。
当用户点击“撤回”按钮时，我们从历史记录数组中移除最后一步，然后清除 Canvas 并取出历史记录中的最近一次记录进行绘制。

Q4：如何实现清空画布的功能？

需要创建一个数组，用来存储绘图的历史记录。
比如说我们新建了 drawingHistory 数组来存储 Canvas 的状态，每当鼠标抬起时，将当前 Canvas 的数据 URL 存入数组。
当用户点击“清空画布”按钮时，我们清空历史记录数组，然后清除 Canvas 。

Q5：在不改变当前画布上内容的情况下，如何将用户涂鸦的内容转成一张黑底白色轨迹的图片？

创建一个新的 canvas 元素，设置新 canvas 的宽度和高度与原始 canvas 相同。在新 canvas 上绘制黑色背景，将原始 canvas 上的图形绘制到新 canvas 上。

三、完整代码

<template>
  <p>你可以在下图中做任意涂鸦：p>
  <div class="main">
    <div class="image" @contextmenu.prevent>
      <img ref="$imgRef" :src="src" />
      <canvas
        ref="$canvasRef"
        @mousedown="startDrawing"
        @mousemove="draw"
        @mouseup="stopDrawing"
      />
    div>
  div>
  <div class="actions">
    <el-button @click="undoLastDraw">撤回el-button>
    <el-button @click="clearAll">清空画布el-button>
    <el-button @click="extraction">提取涂鸦的内容el-button>
  div>
  <div v-if="resultSrc" class="result">
    <p>提取结果：p>
    <img :src="resultSrc" />
  div>
template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from 'vue'

/**
 * 图片的URL
 */
const src = ref('https://images.pexels.com/photos/2187304/pexels-photo-2187304.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1')

/**
 * 提取结果的url
 */
const resultSrc = ref('')

/**
 * 图片的实例
 */
const $imgRef = ref()

/**
 * canvas实例
 */
const $canvasRef = ref()

/**
 * 是否正在绘制中
 */
const drawing = ref(false)

/**
 * 绘制的历史记录
 */
const drawingHistory = ref([])

/**
 * 设置canvas的宽高
 */
async function setCanvas () {
  await nextTick()
  if (!$canvasRef.value) {
    return 
  }

  // 设置Canvas的宽高与图片一致
  $canvasRef.value.width = $imgRef.value.width;
  $canvasRef.value.height = $imgRef.value.height;
}

/**
 * 开始绘制
 */
function startDrawing (event) {
  console.log('startDrawing')
  drawing.value = true
  
  const ctx = $canvasRef.value.getContext('2d');
  ctx.beginPath(); // 清空子路径列表开始一个新的路径

  const { offsetX, offsetY } = event;
  ctx.moveTo(offsetX, offsetY); // 将一个新的子路径的起始点移动到 (x，y) 坐标
}

/**
 * 根据鼠标的移动来绘制线条
 */
function draw (event) {
  if (!drawing.value) return;
  
  const ctx = $canvasRef.value.getContext('2d');
  
  ctx.lineWidth = 5 // 定义笔画宽度
  ctx.strokeStyle = 'white' // 定义笔画颜色
  
  const { offsetX, offsetY } = event;
  ctx.lineTo(offsetX, offsetY); // 使用直线连接子路径的终点到 x，y 坐标的方法（并不会真正地绘制）
  ctx.stroke(); // 根据当前的画线样式，绘制当前或已经存在的路径的方法
}

/**
 * 停止绘制
 */
function stopDrawing() {
  drawing.value = false

  const ctx = $canvasRef.value.getContext('2d');
  
  ctx.closePath(); // 将笔点返回到当前子路径起始点的方法
  drawingHistory.value.push($canvasRef.value.toDataURL()); // 存储当前 Canvas 状态
  // toDataURL 方法返回一个包含图片展示的 data URI 
  console.log('$canvasRef.value.toDataURL()', $canvasRef.value.toDataURL())
}

/**
 * canvas转图片
 */
function canvasToImage() {
  // 创建一个新Canvas元素
  const newCanvas = document.createElement('canvas');
  const newContext = newCanvas.getContext('2d');

  // 设置新Canvas的宽度和高度与原始Canvas相同
  newCanvas.width = $canvasRef.value.width;
  newCanvas.height = $canvasRef.value.height;

  // 在新Canvas上绘制黑色背景
  newContext.fillStyle = 'black'; // 设置背景颜色为黑色
  newContext.fillRect(0, 0, newCanvas.width, newCanvas.height); // fillRect方法是直接在画布上绘制填充

  // 将原始Canvas上的图形绘制到新Canvas上
  newContext.drawImage($canvasRef.value, 0, 0); 
  // drawImage方法提供了多种在画布上绘制图像的方式，第一个参数允许任何的画布图像源

  // 将 Canvas 上的内容转换为DataURL
  const dataURL = newCanvas.toDataURL('image/png'); // 指定要生成的图片格式
  return dataURL;
}

/**
 * 撤回上一次的涂鸦操作
 */
function undoLastDraw() {
  if (drawingHistory.value.length > 0) {
    drawingHistory.value.pop(); // 移除最后一步
    clearCanvas()
    redrawHistory()
  }
}

/**
 * 清空整个Canvas
 */
function clearCanvas() {
  const ctx = $canvasRef.value.getContext('2d');
  ctx.clearRect(0, 0, $canvasRef.value.width, $canvasRef.value.height);
  // clearRect 方法通过把像素设置为透明以达到擦除一个矩形区域的目的
}

/**
 * 重绘 canvas
 */
function redrawHistory() {
  const ctx = $canvasRef.value.getContext('2d');
  const dataURL = drawingHistory.value[drawingHistory.value.length - 1] // 拿出最后一步重绘即可
  const img = new Image();
  img.src = dataURL;
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
  };
}

/**
 * 清空所有绘制内容
 */
function clearAll () {
  drawingHistory.value = []
  clearCanvas()
}

/**
 * 确认提取
 */
function extraction() {
  resultSrc.value = canvasToImage()
}

onMounted(() => {
  setCanvas()
})

script>

<style>
.main {
  width: 100%;
  height: 300px;
}
.actions {
  margin-top: 12px;
}
.image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: rgba(0, 0, 0, 0.015);
  border-radius: 8px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  object-fit: contain;
  border-radius: 8px;
  user-select: none;
}

.image canvas {
  position: absolute;
  top: 0;
}

style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232

四、在线演示

复制上面的代码至 Element Plus Playground 进行调试。