前端图片旋转，恍如隔世之谜的破译之旅

2024-02-11 21:27:28

前端图片旋转的迷惑之谜

前端开发中，图片处理是一项常见的任务，尤其是在用户上传图片时，我们需要将图片绘制到canvas画布上，然后生成base64格式的字符串，以便在前端展示给用户。然而，有时我们会遇到一个奇怪的现象：在电脑上进行代码编写和调试时，一切正常，但一旦在移动端测试，就会发现图片被旋转了。这究竟是怎么回事呢？

抽丝剥茧，探寻谜题的根源

要解开这个谜题，我们需要首先了解图片旋转的原理。当我们在电脑上使用fileReader读取图片时，图片的原始方向信息会被保留下来。但是，当我们在移动端拍照时，由于手机的重力感应等因素，图片的原始方向信息可能会丢失。因此，当我们使用canvas将图片绘制到画布上时，就会出现图片旋转的问题。

破局之匙，一招制胜

既然我们已经找到了问题所在，接下来就是寻找解决方案。要解决这个问题，我们可以使用JavaScript中的EXIF.js库来读取图片的原始方向信息，然后根据这个信息对图片进行旋转矫正。具体步骤如下：

使用fileReader读取图片文件，并将图片数据转换成base64格式。
使用EXIF.js库读取图片的原始方向信息。
根据原始方向信息，对图片进行旋转矫正。
将旋转后的图片绘制到canvas画布上，并生成base64格式的字符串。

实践出真知，代码实例献上

为了帮助大家更好地理解和应用这个解决方案，我们提供了以下示例代码：

// 使用fileReader读取图片文件
const fileReader = new FileReader();
fileReader.onload = function() {
  // 将图片数据转换成base64格式
  const base64Data = fileReader.result;

  // 使用EXIF.js库读取图片的原始方向信息
  EXIF.getData(base64Data, function() {
    // 获取图片的原始方向信息
    const orientation = EXIF.getTag(this, "Orientation");

    // 根据原始方向信息，对图片进行旋转矫正
    const rotatedImage = rotateImage(base64Data, orientation);

    // 将旋转后的图片绘制到canvas画布上
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");
    ctx.drawImage(rotatedImage, 0, 0);

    // 将旋转后的图片生成base64格式的字符串
    const rotatedBase64Data = canvas.toDataURL("image/jpeg");
  });
};
fileReader.readAsDataURL(file);

// 根据原始方向信息，对图片进行旋转矫正
function rotateImage(base64Data, orientation) {
  const image = new Image();
  image.onload = function() {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    // 根据不同的原始方向信息，对图片进行旋转矫正
    switch (orientation) {
      case 2:
        ctx.translate(image.width, 0);
        ctx.scale(-1, 1);
        break;
      case 3:
        ctx.translate(image.width, image.height);
        ctx.rotate(180 * Math.PI / 180);
        break;
      case 4:
        ctx.translate(0, image.height);
        ctx.scale(1, -1);
        break;
      case 5:
        ctx.rotate(90 * Math.PI / 180);
        ctx.scale(1, -1);
        break;
      case 6:
        ctx.rotate(90 * Math.PI / 180);
        break;
      case 7:
        ctx.rotate(-90 * Math.PI / 180);
        ctx.scale(-1, 1);
        break;
      case 8:
        ctx.rotate(-90 * Math.PI / 180);
        break;
    }

    // 将旋转后的图片绘制到canvas画布上
    ctx.drawImage(image, 0, 0);

    // 将旋转后的图片生成base64格式的字符串
    return canvas.toDataURL("image/jpeg");
  };
  image.src = base64Data;
}