前端的部分照片角度不对，如何将已经上传的照片进行旋转

如果你想要通过前端对已经上传的照片进行旋转，可以使用 HTML5 的 Canvas API 来实现。具体的步骤如下：

1. 选中需要旋转的图片元素，可以通过选择器或者 JavaScript 获取该元素。

2. 将图片渲染到 Canvas 上。可以使用 drawImage() 方法将图片绘制到 Canvas 上，需要指定图片元素、起始坐标以及图片的宽度和高度。

3. 使用 Canvas 的 transform() 方法进行旋转操作。该方法接受一个旋转角度和一个旋转中心坐标作为参数，可以将 Canvas 上的绘制内容进行旋转。

4. 将旋转后的图片导出。可以使用 toDataURL() 方法将 Canvas 上的内容导出为 data URL，然后将 data URL 赋值给一个新的图片元素的 src 属性即可。

下面是一个示例代码：

HTML 代码：

<input type="file" id="file-input">
<img id="image-preview" src="" alt="your-image">

JavaScript 代码：

const fileInput = document.getElementById('file-input');
const imagePreview = document.getElementById('image-preview');

fileInput.addEventListener('change', function() {
  const file = this.files[0];
  const reader = new FileReader();
  
  reader.onload = function(event) {
    const image = new Image();
    image.src = event.target.result;
    image.onload = function() {
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      const width = image.width;
      const height = image.height;

      canvas.width = width;
      canvas.height = height;

      // 绘制原始图片
      context.drawImage(image, 0, 0, width, height);

      // 旋转图片
      context.translate(width / 2, height / 2);
      context.rotate(Math.PI / 2);
      context.drawImage(image, -height / 2, -width / 2, height, width);

      // 导出旋转后的图片
      const rotatedImage = new Image();
      rotatedImage.src = canvas.toDataURL();
      imagePreview.src = rotatedImage.src;
    }
  }
  
  reader.readAsDataURL(file);
});

在上面的示例中，我们使用了 FileReader API 来读取用户上传的图片文件，然后将图片绘制到 Canvas 上进行旋转操作，最后将旋转后的图片导出为 data URL 并显示在页面中。你可以根据需要修改旋转的角度和导出的图片格式。