Canvas实现图片上标注、缩放、移动、保存历史状态、橡皮擦功能

要实现 Canvas 上的图片标注、缩放、移动、保存历史状态、橡皮擦等功能，可以通过以下步骤来完成： 1. 加载图片。使用 JavaScript 中的 Image 对象加载图片，并在图片加载完成后将其绘制到 Canvas 上。 ```javascript const img = new Image(); // 创建 Image 对象 img.onload = function() { ctx.drawImage(img, 0, 0); // 将图片绘制到画布上 }; img.src = 'image.jpg'; // 设置图片路径 ``` 2. 实现标注功能。通过鼠标事件监听用户的操作，使用 Canvas 的 API 绘制标注。例如，监听鼠标点击事件，在点击位置绘制一个圆形。 ```javascript canvas.addEventListener('mousedown', function(e) { ctx.beginPath(); ctx.arc(e.offsetX, e.offsetY, 5, 0, 2 * Math.PI); ctx.fill(); }); ``` 3. 实现缩放和移动功能。通过鼠标滚轮事件监听用户的操作，使用 Canvas 的 API 实现缩放和移动。例如，监听鼠标滚轮事件，在滚轮滚动时根据滚动方向调整画布的缩放比例。 ```javascript canvas.addEventListener('wheel', function(e) { const delta = e.deltaY > 0 ? 0.1 : -0.1; const scale = Math.max(0.1, Math.min(10, currentScale + delta)); ctx.scale(scale, scale); currentScale = scale; }); ``` 4. 实现保存历史状态功能。使用 JavaScript 中的数组来保存历史状态，每当用户进行操作时，将当前状态保存到数组中。撤销操作时，从数组中取出上一个状态并恢复到画布上。 ```javascript const states = []; // 保存历史状态的数组 function saveState() { states.push(canvas.toDataURL()); // 保存当前状态 } function undo() { if (states.length > 0) { const img = new Image(); img.onload = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布 ctx.drawImage(img, 0, 0); // 绘制上一个状态 }; img.src = states.pop(); // 取出上一个状态 } } ``` 5. 实现橡皮擦功能。通过监听鼠标事件，在鼠标位置绘制一个与背景相同的矩形，来模拟橡皮擦的效果。 ```javascript canvas.addEventListener('mousemove', function(e) { if (erasing) { ctx.fillStyle = '#ffffff'; // 设置橡皮擦颜色为白色 ctx.fillRect(e.offsetX - 5, e.offsetY - 5, 10, 10); // 绘制矩形 } }); ``` 完整示例代码如下： ```html <!DOCTYPE html> <html> <body> <canvas id="canvas" width="600" height="400"></canvas> <button onclick="undo()">撤销</button> <button onclick="erasing = !erasing">橡皮擦</button> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let currentScale = 1; let erasing = false; const states = []; const img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); saveState(); }; img.src = 'image.jpg'; canvas.addEventListener('mousedown', function(e) { ctx.beginPath(); ctx.arc(e.offsetX, e.offsetY, 5, 0, 2 * Math.PI); ctx.fill(); saveState(); }); canvas.addEventListener('mousemove', function(e) { if (erasing) { ctx.fillStyle = '#ffffff'; ctx.fillRect(e.offsetX - 5, e.offsetY - 5, 10, 10); } }); canvas.addEventListener('wheel', function(e) { const delta = e.deltaY > 0 ? 0.1 : -0.1; const scale = Math.max(0.1, Math.min(10, currentScale + delta)); ctx.scale(scale, scale); currentScale = scale; }); function saveState() { states.push(canvas.toDataURL()); } function undo() { if (states.length > 1) { const img = new Image(); img.onload = function() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 0, 0); }; img.src = states[states.length - 2]; states.pop(); } } </script> </body> </html> ```

阅读全文

Canvas实现图片上标注、缩放、移动、保存历史状态、橡皮擦功能

相关推荐

Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 （附转换公式）

editImage:使用canvas实现图片标记功能

基于canvas剪辑区域功能实现橡皮擦效果

H5 canvas图片加相框 图片缩放扩大移动

js canvas实现橡皮擦效果

canvas 图片上画标注demo

用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能

canvas绘图 移动端手机壳定制图片缩放移动

HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例

canvas-ereaser:canvas橡皮擦

Canvas仿blend移动缩放

使用canvas渲染图片并在图片上动态绘制矩形框+标注信息，矩形框+标注信息可跟随图片等比缩放，可选中并删除矩形框+标注信息

js 将canvas生成图片保存,或直接保存一张图片的实现方法

html2canvas实现将dom生成图片并保存至本地

cocos creator实现橡皮擦功能

canvas剪裁缩放图片

使用canvas实现图片旋转与缩放的JavaScript技巧

canvas基本画图功能

若依管理存在任何文件读取漏洞检测系统，渗透测试.zip

【java毕业设计】学生社团管理系统源码（完整前后端+说明文档+LW）.zip

最新推荐

微信小程序实现的canvas合成图片功能示例

canvas实现图片根据滑块放大缩小效果

Android实现让图片在屏幕上任意移动的方法(拖拽功能)

js+canvas实现图片格式webp/png/jpeg在线转换

Android开发实现保存图片到手机相册功能

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能（附转换公式）

H5 canvas图片加相框图片缩放扩大移动

canvas绘图移动端手机壳定制图片缩放移动