js实现旋转90

实现图片旋转90度的JavaScript方法

通过Canvas API可以轻松实现图片旋转90度的功能。以下是具体实现步骤：

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

  // 交换宽高尺寸以适应旋转
  canvas.width = imageElement.height;
  canvas.height = imageElement.width;

  // 平移并旋转画布
  ctx.translate(canvas.width / 2, canvas.height / 2);
  ctx.rotate(Math.PI / 2);
  ctx.drawImage(imageElement, -imageElement.width / 2, -imageElement.height / 2);

  return canvas;
}

使用示例

const img = new Image();
img.src = 'example.jpg';
img.onload = function() {
  const rotatedCanvas = rotateImage90(img);
  document.body.appendChild(rotatedCanvas);
};

实现原理

Canvas的旋转操作通过坐标系变换完成。translate方法将原点移动到画布中心，rotate方法实现90度旋转（π/2弧度），最后drawImage在调整后的坐标系中绘制图像。

注意事项

旋转后的图像尺寸会发生变化，宽度变为原高度，高度变为原宽度。如果需要保持原始尺寸，需要额外进行缩放处理。

旋转操作会改变图像的EXIF方向信息，对于需要保留元数据的场景需特别注意。