当前位置：首页 > JavaScript

实现图片旋转js

2026-02-28 22:46:50JavaScript

实现图片旋转的 JavaScript 方法

使用 CSS transform 属性

通过修改元素的 transform 属性实现旋转效果。以下代码示例将图片旋转 90 度：

const image = document.getElementById('myImage');
image.style.transform = 'rotate(90deg)';

可以动态调整旋转角度：

let angle = 0;
function rotateImage() {
  angle += 90;
  image.style.transform = `rotate(${angle}deg)`;
}

使用 Canvas API

通过 Canvas 的 rotate() 方法实现更复杂的旋转控制：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(canvas.width/2, canvas.height/2);
  ctx.rotate(Math.PI/2); // 90度旋转
  ctx.drawImage(img, -img.width/2, -img.width/2);
  ctx.restore();
};
img.src = 'image.jpg';

使用第三方库

对于更高级的旋转需求，可以考虑使用库如 Fabric.js：

const canvas = new fabric.Canvas('canvas');
fabric.Image.fromURL('image.jpg', function(img) {
  img.set({
    angle: 45,
    left: 100,
    top: 100
  });
  canvas.add(img);
});

动画旋转效果

结合 CSS transition 实现平滑旋转动画：

.image {
  transition: transform 0.5s ease;
}
const image = document.querySelector('.image');
image.style.transform = 'rotate(180deg)';

响应鼠标/手势旋转

实现拖拽旋转功能：

let isDragging = false;
let startAngle = 0;
let currentAngle = 0;

image.addEventListener('mousedown', (e) => {
  isDragging = true;
  startAngle = getAngle(e);
});

window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  const newAngle = getAngle(e);
  currentAngle += newAngle - startAngle;
  image.style.transform = `rotate(${currentAngle}deg)`;
  startAngle = newAngle;
});

function getAngle(e) {
  const rect = image.getBoundingClientRect();
  return Math.atan2(e.clientY - rect.top, e.clientX - rect.left) * 180 / Math.PI;
}

实现图片旋转js