需求背景
用户需要上传图片,然后前端将这张图片绘制到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
中是不会被旋转的。如果以其他角度拍搜时,就会发生旋转。
这时候就需要知道用户上传的图片是什么角度拍摄的
0°
、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
旋转了不同的角度,下面就是将图片绘制到画布上
以orientation
为6
为例,也就是竖拍为例
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的都不需要进行渲染