
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片旋转</title>
<style>
#canvas {
display: none;
}
#outputImage {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>点击按钮旋转图片</h1>
<input type="file" id="upload" accept="image/*">
<br>
<button id="rotateBtn">顺时针旋转 90°</button>
<button id="rotateBtn2">逆时针旋转 90°</button>
<br>
<canvas id="canvas"></canvas>
<br>
<img id="outputImage" alt="旋转后的图片">
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const rotateBtn = document.getElementById('rotateBtn');
const rotateBtn2 = document.getElementById('rotateBtn2');
const upload = document.getElementById('upload');
const outputImage = document.getElementById('outputImage');
let img = new Image();
let angle = 0;
upload.addEventListener('change', function (e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function (event) {
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
outputImage.src = canvas.toDataURL();
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
});
rotateBtn.addEventListener('click', function () {
angle += 90;
if (angle >= 360) angle = 0;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);
ctx.drawImage(img, -img.width / 2, -img.height / 2);
ctx.restore();
outputImage.src = canvas.toDataURL();
});
rotateBtn2.addEventListener('click', function () {
angle -= 90;
if (angle < 0) angle = 270;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle * Math.PI / 180);
ctx.drawImage(img, -img.width / 2, -img.height / 2);
ctx.restore();
outputImage.src = canvas.toDataURL();
});
</script>
</body>
</html>