阅读 1080

【bug】前端上传图片被旋转

需求背景

用户需要上传图片,然后前端将这张图片绘制到canvas画布上,然后生成base64展示给用户,这里需要其他操作,所以需要使用canvas,而不是直接用fileReader

出现的问题

在电脑上,我们进行代码编写的时候,在chrome上进行调试的时候没有问题,但是一旦在手机上测试就发现图片进行了旋转,不同的拍摄角度图片旋转的角度也不一样,如横拍,竖拍,倒着拍。具体代码如下:

const image = new Image();
image.src = '图片地址';
image.onload = () => {
    const { width, height } = image;
    const convas = document.createElement('convas');
    canvas.width = width;
    canvas.height = height;
    const context = context.getContext('2d')
    context.drawImage(image, 0, 0, width, height);
    const base64 = canvas.toDataURL('image/png', 0.8);
    // 将生成的base64传递给回调函数
    callback(base64)
}
复制代码

具体表现为,这是我们上传的图片

是正向的,但是发现展示在canvas画布中的图片为
图片在原有的基础上逆时针旋转了90°

问题原理分析

在手机中默认横排才是正确的拍照姿势,如果我们手机竖着拿然后逆时针旋转90°这才是正确的拍照姿势,这时候拍出来的照片展示在canvas中是不会被旋转的。如果以其他角度拍搜时,就会发生旋转。 这时候就需要知道用户上传的图片是什么角度拍摄的

一般来说上传的图片有这么几种情况分别旋转90°180°270°,所以需要对各种情况进行处理

解决方案

npm上有有一个包叫exif,他可以获取到上传图片的旋转角度,具体使用方法可参考文档,下面是我们的解决方案

const image = new Image();
image.src = 'src';
image.onload = () => {
    EXIF.getData(image, () => {
        const orientation = EXIF.getTag(this, 'Orientation');
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        modify(canvas, context, orientation, image);
    })
}
复制代码

绘制图片到canvas

在上图中,我们了解到不同orientation旋转了不同的角度,下面就是将图片绘制到画布上 以orientation6为例,也就是竖拍为例

x轴和y轴是canvas画布轴的方向,图片1也就是用户上传的图片要进行顺时针旋转90°到图片2图片才能正常显示,而且需要记住的是绘制图片时从图片的左上角开始绘制的,所以图片2的绘制方法如下:

function modify(canvas, context, orientation, image) {
    const { width, height } = image;
    switch (orientation) {
        case 6:
            canvas.width = height;
            canvas.height = width;
            context.rotate(0.5 * Math.PI);
            context.drawImage(image, 0, -height, width, height);
        }
}
复制代码

首先更改canvas的宽高,因为最后生成的图片是图片2,所以需要限制他的宽高。然后需要将画布旋转90°,然后绘制坐标从(0, -height)开始,然后就绘制成功了,然后输出到页面当中就可以了,其他的旋转角度具体代码如下:

function modify(canvas, context, orientation, image) {
  const { width, height } = image;
  switch (orientation) {
    case 3:
      canvas.width = width;
      canvas.height = height;
      context.rotate(Math.PI);
      context.drawImage(image, -width, -height, width, height);
      break;
    case 6:
      canvas.width = height;
      canvas.height = width;
      context.rotate(0.5 * Math.PI);
      context.drawImage(image, 0, -height, width, height);
      break;
    case 8:
      canvas.width = height;
      canvas.height = width;
      context.rotate((3 * Math.PI) / 2);
      context.drawImage(image, -width, 0, width, height);
      break;
    default:
      break;
  }
}
复制代码

万恶的ios

发现大部分手机都正常的时候,此时万恶的苹果手机出现了问题,结论发现ios版本大于等于13.4.1的手机不需要前端对其调整图片方向,无论倒着拍,还是旋转拍,图片上传后的方向都是正确的,所以需要对ios的版本进行判断

const str = navigator.userAgent.toLowerCase();
const version = str.match(/cpu iphone os (.*?) like mac os/);
let currentVersion = '0.0.0';
if (version && version[1]) {
  currentVersion = version[1].replace(/_/g, '.');
}
function isCurrentVersionSupport(preVersion = '', lastVersion = '') {
  const sources = preVersion.split('.');
  const dests = lastVersion.split('.');
  const maxL = Math.max(sources.length, dests.length);
  let result = true;
  for (let i = 0; i < maxL; i++) {
    let preValue = sources.length > i ? sources[i] : 0;
    let preNum = isNaN(Number(preValue)) ? preValue.charCodeAt() : Number(preValue);
    let lastValue = dests.length > i ? dests[i] : 0;
    let lastNum = isNaN(Number(lastValue)) ? lastValue.charCodeAt() : Number(lastValue);
    if (preNum < lastNum) {
      result = false;
      break;
    } else if (preNum > lastNum) {
      result = true;
      break;
    }
  }
  return result;
}
复制代码

因为ios的版本都是类似这样的version1.version2.version3所以这里没有做更多的处理,最后处理图片的逻辑为

    const image = new Image();
    image.src = reader.result;
    image.onload = () => {
      const { width, height } = image;
      const { size: filesize } = file;
      if (size && filesize / 1000 > size) {
        fn({
          code: 2,
          message: '图片太大',
        });
        return false;
      }
      EXIF.getData(image, function () {
        EXIF.getAllTags(this);
        const orientation = EXIF.getTag(this, 'Orientation');
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');
        context.clearRect(0, 0, width, height);
        const support = isCurrentVersionSupport(currentVersion, '13.4.0');
        if (getUserAgent().isIos && orientation > 1 && !support) {
          modify(canvas, context, orientation, image);
        } else if (orientation > 1 && getUserAgent().isAndroid) {
          modify(canvas, context, orientation, image);
        } else {
          canvas.width = width;
          canvas.height = height;
          context.drawImage(image, 0, 0, width, height);
        }
        const base64 = canvas.toDataURL('image/jpeg', 0.5);
        callback(base64)
      });
    };
复制代码

chrome上传图片不需要渲染

上次发现ios这个上传图片被旋转以后,有读者提到chrome内核有部分机型也不需要进行旋转,然后测试同学也提到了这个bug,下面这个就是相应的解决方案,就是通过判断相应的chrome版本

const ua = navigator.userAgent.toLowerCase();
const chromeVersion = ua.match(/chrome\/([\d\.]+)/);
let needTranslate = true;
if (chromeVersion && chromeVersion[1]) {
  needTranslate = 81 > chromeVersion[1].slice(0, 2);
}
复制代码

核心就是判断chrome内核版本不能大于81

Log

5.28 修改ios版本号, 发现ios大于等于13.4的都不用去旋转图片 6.19 发现chrome浏览器高于81的都不需要进行渲染