直接上代码
| <!DOCTYPE html> |
| <html lang="en"> |
| |
| <head> |
| <meta charset="UTF-8"> |
| <title>在canvas上面获取特定位置的base64信息</title> |
| </head> |
| <style> |
| #origin_canvas { |
| width: 200px; |
| height: 200px; |
| |
| } |
| </style> |
| |
| <body> |
| <div> |
| <canvas id="canvas" width="400" height="400"></canvas> |
| <button id="undoBtn">撤销</button> |
| <button id="redoBtn">重做</button> |
| <button id="saveBtn">保存</button> |
| <img id="resultImg"> |
| |
| </div> |
| <script> |
| const canvas = document.getElementById('canvas'); |
| const undoBtn = document.getElementById('undoBtn'); |
| const redoBtn = document.getElementById('redoBtn'); |
| const saveBtn = document.getElementById('saveBtn'); |
| const context = canvas.getContext('2d'); |
| const resultImg = document.getElementById('resultImg'); |
| |
| let undoList = []; // 用于保存所有操作，用于撤销和重做 |
| let redoList = []; // 用于保存所有撤销的操作，用于重做 |
| |
| let isDrawing = false; |
| let currentPath = null; |
| |
| // 鼠标按下事件 |
| canvas.addEventListener('mousedown', e => { |
| isDrawing = true; |
| currentPath = { |
| color: context.strokeStyle, |
| width: context.lineWidth, |
| points: [{ x: e.offsetX, y: e.offsetY }] |
| }; |
| }); |
| |
| // 鼠标移动事件 |
| canvas.addEventListener('mousemove', e => { |
| if (!isDrawing) return; |
| currentPath.points.push({ x: e.offsetX, y: e.offsetY }); |
| context.clearRect(0, 0, canvas.width, canvas.height); |
| drawPaths([...undoList, currentPath]); |
| }); |
| |
| // 鼠标松开事件 |
| canvas.addEventListener('mouseup', e => { |
| isDrawing = false; |
| undoList.push(currentPath); |
| redoList = []; |
| }); |
| |
| // 鼠标离开事件 |
| canvas.addEventListener('mouseleave', e => { |
| isDrawing = false; |
| }); |
| |
| // 撤销按钮点击事件 |
| undoBtn.addEventListener('click', e => { |
| if (undoList.length === 0) return; |
| const lastPath = undoList.pop(); |
| redoList.push(lastPath); |
| context.clearRect(0, 0, canvas.width, canvas.height); |
| drawPaths(undoList); |
| }); |
| |
| // 重做按钮点击事件 |
| redoBtn.addEventListener('click', e => { |
| if (redoList.length === 0) return; |
| const lastPath = redoList.pop(); |
| undoList.push(lastPath); |
| context.clearRect(0, 0, canvas.width, canvas.height); |
| drawPaths(undoList); |
| }); |
| |
| // 保存按钮点击事件 |
| saveBtn.addEventListener('click', e => { |
| const dataUrl = canvas.toDataURL(); |
| resultImg.src = dataUrl; |
| }); |
| |
| // 画所有的路径 |
| function drawPaths(paths) { |
| paths.forEach(path => { |
| context.beginPath(); |
| context.strokeStyle = path.color; |
| context.lineWidth = path.width; |
| context.moveTo(path.points[0].x, path.points[0].y); |
| path.points.slice(1).forEach(point => { |
| context.lineTo(point.x, point.y); |
| }); |
| context.stroke(); |
| }); |
| } |
| |
| </script> |
| </body> |
| |
| </html> |
上方的代码可以直接粘贴，可以看效果
