当前位置：首页 > JavaScript

js实现图片旋转

2026-02-28 22:48:21JavaScript

使用CSS transform实现图片旋转

通过CSS的transform属性结合JavaScript动态修改旋转角度，实现图片旋转效果。以下是一个基础实现示例：

<img id="rotateImage" src="your-image.jpg" alt="Rotating Image">
<button onclick="rotateImage()">旋转图片</button>

<script>
  let currentRotation = 0;
  function rotateImage() {
    currentRotation += 90;
    document.getElementById('rotateImage').style.transform = `rotate(${currentRotation}deg)`;
  }
</script>

使用canvas实现精确旋转

对于需要更精确控制的旋转（如非90度倍数旋转），可以使用canvas API：

function rotateCanvasImage(imageElement, degrees) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  // 调整canvas尺寸以适应旋转后的图像
  const rad = degrees * Math.PI / 180;
  canvas.width = Math.abs(imageElement.width * Math.cos(rad)) + 
                 Math.abs(imageElement.height * Math.sin(rad));
  canvas.height = Math.abs(imageElement.height * Math.cos(rad)) + 
                  Math.abs(imageElement.width * Math.sin(rad));

  // 执行旋转
  ctx.translate(canvas.width/2, canvas.height/2);
  ctx.rotate(rad);
  ctx.drawImage(imageElement, -imageElement.width/2, -imageElement.height/2);

  return canvas.toDataURL();
}

实现平滑动画旋转

使用CSS动画实现连续平滑旋转效果：

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rotating {
  animation: spin 2s linear infinite;
}

// 添加/移除旋转类
document.getElementById('imageId').classList.toggle('rotating');

响应手势旋转（移动端）

通过触摸事件实现手势旋转：

let lastAngle = 0;
const image = document.getElementById('image');

image.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2) {
    const touch1 = e.touches[0];
    const touch2 = e.touches[1];

    const currentAngle = Math.atan2(
      touch2.clientY - touch1.clientY,
      touch2.clientX - touch1.clientX
    ) * 180 / Math.PI;

    if (lastAngle !== 0) {
      const angleDiff = currentAngle - lastAngle;
      const currentRotation = parseInt(image.style.transform.replace(/[^0-9]/g, '') || '0');
      image.style.transform = `rotate(${currentRotation + angleDiff}deg)`;
    }

    lastAngle = currentAngle;
  }
});

image.addEventListener('touchend', () => {
  lastAngle = 0;
});

使用第三方库（如jQuery）

如果需要简化操作，可以使用jQuery实现：

$('#rotateBtn').click(function() {
  let rotation = ($('#myImage').data('rotation') || 0) + 90;
  $('#myImage').css({
    'transform': 'rotate(' + rotation + 'deg)',
    '-webkit-transform': 'rotate(' + rotation + 'deg)',
    '-ms-transform': 'rotate(' + rotation + 'deg)'
  }).data('rotation', rotation);
});

js实现图片旋转