html页面创建canvas画板，在画板添加图片，并实现图片拖拽
1. 在html页面中引入canvas标签，设置大小
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Canvas画板</title> <link rel="stylesheet" href="./index.css"> </head> <body> <!-- 引入js文件 --> <script src="./index.js"></script> <div class="content"> <input type="file" id="img_input" onchange="fileInput(this.files)"> <canvas width="600" height="500" id="canvas"> </canvas> </div> </body> </html>
2. 随意写点样式，给画板加个边框
* { margin: 0; padding: 0; } .content { position: relative; width: 900px; height: 100vh; margin: 0 auto; } .content input { position: absolute; top: 40px; left: 200px; margin-left: 50px; } .content canvas { border: 1px solid #30336b; margin-top: 100px; margin-left: 150px; }
3. js代码
- 在页面加载完成后获取页面的canvas对象，并绑定监听事件，以实现拖动
window.onload = function () { // 获取canvas对象 let canvas = document.getElementById("canvas"); canvasWidth = canvas.width; canvasHeight = canvas.height; let ctx = canvas.getContext("2d"); }
- 处理input标签选择的图片，创建图片添加至画板中
function fileInput(files) { let reader = new FileReader(); reader.onload = function (e) { // 创建图片对象 img = new Image(); // 读取图片路劲 img.src = e.target.result; let ctx = canvas.getContext("2d"); img.onload = function () { // 设置缩放比例 let scale = 1; // 长或宽超过150进行缩放 let maxNum = 150; if (this.width > maxNum || this.height > maxNum) { if (this.width > this.height) { scale = maxNum / this.width; } else { scale = maxNum / this.height; } } ctxHeight = scale * this.height; ctxWidth = scale * this.width; // 清除画布 ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 显示图片 ctx.drawImage(img, 0, 0, ctxWidth, ctxHeight); // 重新选择图片时对img_x, img_y清零 img_x = 0; img_y = 0; }; }; reader.readAsDataURL(files[0]); }
- 部分监听事件的函数，主要由mouseup,mousedown,mousemove事件完成拖拽
// 事件处理函数 //鼠标按下 function mouseDown(e) { let x = e.offsetX; let y = e.offsetY; // 记录鼠标相对于图片的位置 mouseX = e.offsetX - img_x; mouseY = e.offsetY - img_y; // 判断是否在图片范围内 if ( x >= img_x && x <= img_x + ctxWidth && y >= img_y && y <= img_y + ctxHeight ) { isDown = true; } } // 鼠标松开 function mouseUp() { isDown = false; } // 鼠标移动 function mouseMove(e) { if (isDown) { let x = e.offsetX - mouseX; let y = e.offsetY - mouseY; ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 判断有无超过边界 if (y < 0) { y = 0; } if (x < 0) { x = 0; } if (x > canvasWidth - ctxWidth) { x = canvasWidth - ctxWidth; } if (y > canvasHeight - ctxHeight) { y = canvasHeight - ctxHeight; } ctx.drawImage(img, x, y, ctxWidth, ctxHeight); img_x = x; img_y = y; } } function mouseLeave() { isDown = false; } };
4. js完整代码 补充了上面函数所使用到的全局变量
let ctxHeight, ctxWidth, canvasWidth, canvasHeight, mouseX, mouseY; let isDown = false; let img_x = 0; let img_y = 0; window.onload = function () { // 获取canvas对象 let canvas = document.getElementById("canvas"); canvasWidth = canvas.width; canvasHeight = canvas.height; let ctx = canvas.getContext("2d"); // 绑定事件 canvas.addEventListener("mousedown", mouseDown); canvas.addEventListener("mouseup", mouseUp); canvas.addEventListener("mousemove", mouseMove); canvas.addEventListener("mouseleave", mouseLeave); // 事件处理函数 //鼠标按下 function mouseDown(e) { let x = e.offsetX; let y = e.offsetY; // 记录鼠标相对于图片的位置 mouseX = e.offsetX - img_x; mouseY = e.offsetY - img_y; // 判断是否在图片范围内 if ( x >= img_x && x <= img_x + ctxWidth && y >= img_y && y <= img_y + ctxHeight ) { isDown = true; } } // 鼠标松开 function mouseUp() { isDown = false; } // 鼠标移动 function mouseMove(e) { if (isDown) { let x = e.offsetX - mouseX; let y = e.offsetY - mouseY; ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 判断有无超过边界 if (y < 0) { y = 0; } if (x < 0) { x = 0; } if (x > canvasWidth - ctxWidth) { x = canvasWidth - ctxWidth; } if (y > canvasHeight - ctxHeight) { y = canvasHeight - ctxHeight; } ctx.drawImage(img, x, y, ctxWidth, ctxHeight); img_x = x; img_y = y; } } function mouseLeave() { isDown = false; } }; function fileInput(files) { let reader = new FileReader(); reader.onload = function (e) { // 创建图片对象 img = new Image(); // 读取图片路劲 img.src = e.target.result; let ctx = canvas.getContext("2d"); img.onload = function () { // 设置缩放比例 let scale = 1; // 长或宽超过150进行缩放 let maxNum = 150; if (this.width > maxNum || this.height > maxNum) { if (this.width > this.height) { scale = maxNum / this.width; } else { scale = maxNum / this.height; } } ctxHeight = scale * this.height; ctxWidth = scale * this.width; // 清除画布 ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 显示图片 ctx.drawImage(img, 0, 0, ctxWidth, ctxHeight); // 重新选择图片时对img_x, img_y清零 img_x = 0; img_y = 0; }; }; reader.readAsDataURL(files[0]); }
