html上传图片的原理,【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中是不会被旋转的。如果以其他角度拍搜时，就会发生旋转。

这时候就需要知道用户上传的图片是什么角度拍摄的

一般来说上传的图片有这么几种情况分别旋转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.1');

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)

});

};

复制代码

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[【bug】前端上传图片被旋转]http://www.zyiz.net/tech/detail-137331.html