js照片旋转角度

在JavaScript中处理照片旋转角度通常涉及到图像处理和Canvas API的使用。以下是一些基础概念和相关信息：

基础概念

Canvas API：HTML5提供的一个绘图接口，允许在网页上进行图形绘制。
Image对象：用于在网页上显示图像。
旋转角度：通常以度（°）为单位，但在Canvas中使用弧度（rad）进行计算。

类型与应用场景

固定角度旋转：适用于需要按照特定角度（如90°、180°）旋转的场景。
任意角度旋转：适用于需要自由指定旋转角度的场景，如图像编辑工具。
自动校正：根据EXIF信息自动调整照片方向，常见于上传照片时的预览功能。

示例代码

以下是一个简单的示例，展示如何在JavaScript中使用Canvas API旋转图片：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Rotation</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
function drawRotatedImage(image, angle) {
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');
    
    // 清空画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 计算旋转中心
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    
    // 将角度转换为弧度
    const radians = angle * Math.PI / 180;
    
    // 保存当前绘图状态
    ctx.save();
    
    // 平移到旋转中心
    ctx.translate(centerX, centerY);
    
    // 旋转
    ctx.rotate(radians);
    
    // 绘制图像（注意坐标系变化）
    ctx.drawImage(image, -image.width / 2, -image.height / 2);
    
    // 恢复之前的绘图状态
    ctx.restore();
}

// 加载图片
const img = new Image();
img.src = 'path_to_your_image.jpg';
img.onload = function() {
    drawRotatedImage(this, 90); // 旋转90度
};
</script>
</body>
</html>