针对上述案例添加裁剪功能
时间: 2023-12-16 10:03:02 浏览: 74
好的,我可以为你添加裁剪功能。以下是更新后的代码,其中包含了裁剪功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas 图片编辑器</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<input type="file" id="fileInput">
<canvas id="canvas" width="400" height="300"></canvas>
<button id="cropButton">裁剪</button>
<script>
window.onload = function() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.onload = function() {
// 将图片绘制到 Canvas 上
context.drawImage(img, 0, 0, canvas.width, canvas.height);
}
img.src = e.target.result;
}
reader.readAsDataURL(file);
});
var cropButton = document.getElementById('cropButton');
cropButton.addEventListener('click', function() {
// 获取用户选择的裁剪区域
var x = parseInt(prompt("请输入裁剪区域的 x 坐标", "0"));
var y = parseInt(prompt("请输入裁剪区域的 y 坐标", "0"));
var width = parseInt(prompt("请输入裁剪区域的宽度", "100"));
var height = parseInt(prompt("请输入裁剪区域的高度", "100"));
// 创建一个新的 Canvas 用于显示裁剪后的图片
var croppedCanvas = document.createElement('canvas');
var croppedContext = croppedCanvas.getContext('2d');
croppedCanvas.width = width;
croppedCanvas.height = height;
// 在新的 Canvas 上绘制裁剪区域
croppedContext.drawImage(canvas, x, y, width, height, 0, 0, width, height);
// 清空原有的 Canvas
context.clearRect(0, 0, canvas.width, canvas.height);
// 将裁剪后的图片绘制到原有的 Canvas 上
context.drawImage(croppedCanvas, 0, 0, canvas.width, canvas.height);
});
};
</script>
</body>
</html>
```
更新后的代码增加了一个裁剪按钮,并在点击按钮时弹出对话框,让用户输入裁剪区域的坐标和尺寸。然后,将选择的区域裁剪出来,并在原有的 Canvas 上显示裁剪后的图片。
希望这次的更新满足了你的需求!如果你有其他问题,请随时提问。