js 图片旋转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片左旋转和翻转示例</title>
</head>
<body>
<input type="file" id="imageInput" accept="image/png,image/jpg,image/jpeg,image/gif">
<div id="imagePreview" style="display: inline-block;"></div>
<div class="part">
<button type="button" style="display: block;" onclick="createNewImg();">刷新</button>
<div class="container">
<canvas id="canvas"></canvas>
</div>
</div>
<script>
const imageInput = document.getElementById('imageInput');
const imagePreview = document.getElementById('imagePreview');
imageInput.addEventListener('change', handleImageUpload);
function handleImageUpload(event) {
const selectedFile = event.target.files[0];
if (selectedFile) {
const reader = new FileReader();
reader.onload = function (event) {
const imageUrl = event.target.result;
const imgElement = document.createElement('img');
imgElement.src = imageUrl;
imagePreview.innerHTML = ''; // Clear previous preview
imagePreview.appendChild(imgElement);
}
reader.readAsDataURL(selectedFile);
setTimeout(() => {
document.querySelector('.part').style.display = 'inline-block';
createNewImg();
}, 100);
}
}
function createNewImg() {
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
// 加载图像
const img = document.querySelector('#imagePreview img');
const div = document.querySelector('.container');
div.style.height = img.height + 'px';
div.style.width = img.width + 'px';
canvas.style.height = img.height + 60 + 'px';
canvas.style.width = img.width + 40 + 'px';
// 使canvas大小与图像一致
canvas.width = img.width;
canvas.height = img.height;
// 随机旋转和平移
const rotateAngle = Math.random() * 5 - 2.5; // 随机旋转角度，范围在-2.5到2.5度之间
const translateX = Math.random() * 20 - 10; // 随机水平平移量
const translateY = Math.random() * 20 - 10; // 随机垂直平移量
// const rotateAngle = 2.5
// const translateX = 10
// const translateY = 10
// 在canvas上绘制图像，加入旋转和平移效果
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(rotateAngle * Math.PI / 180);
ctx.drawImage(img, -canvas.width / 2 + translateX, -canvas.height / 2 + translateY);
ctx.resetTransform();
// 添加前置摄像头光线效果
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
// 增加亮度
const brightnessFactor = 1.2; // 增加的亮度因子
for (let i = 0; i < data.length; i += 4) {
data[i] *= brightnessFactor; // 增加红色通道亮度
data[i + 1] *= brightnessFactor; // 增加绿色通道亮度
data[i + 2] *= brightnessFactor; // 增加蓝色通道亮度
}
ctx.putImageData(imageData, 0, 0);
}
</script>
<style>
.part {
display: none;
}
.container {
overflow: hidden;
display: inline-block;
background: red;
border: 3px solid blue;
}
#canvas {
margin-top: -30px;
margin-left: -20px;
}
</style>
</body>
</html>
