共计 1255 个字符,预计需要花费 4 分钟才能阅读完成。
需要很简略:h5 拍照上传照片,而后显示进去
问题在:上传之后的图片在 PC,IOS 端均能失常显示,Android 端显示的则是被旋转 90 度的。
间接上代码
上面这个办法传入 file 对象,而后会去除掉照片中的 exIf 信息,之后返回。用这个办法,就能够保障 PC,IOS,Android 端都显示失常的图片。
function removePicExif(file) {return new Promise((reslove) => {if (file) {let reader = new FileReader();
let image = new Image();
reader.onload = function (ev) {
image.src = ev.target.result;
image.onload = function () {
const ctxWidth = this.width;
const ctxHeight = this.height;
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = ctxWidth;
canvas.height = ctxHeight;
ctx.drawImage(this, 0, 0, ctxWidth, ctxHeight);
canvas.toBlob((blob) => {const newFile = new File([blob], file.name, {
type: "image/jpeg",
lastModified: Date.now(),});
reslove(newFile)
});
};
};
reader.readAsDataURL(file);
}
})
}
上面我来说下我的钻研
发现在手机垂直拍摄上传的图片会在 Android 中被旋转后,查了很多材料,大同小异,就是获取到图片的 EXIF 信息,而后利用 canvas 旋转到正确的方向。
然而,然而理论测试中,我发现并不需要利用 canvas 再做旋转。
大家能够拿出手机来拍摄一下,在垂直竖拍状况下,拍摄的图片失常。在垂直横拍的状况下,其实拍摄的图片也是和垂直竖拍的方向一样的。
在垂直的状况下,你无论横排,竖拍,倒着拍,拍进去的图片,方向都是以竖拍方向来的,并不会因为你是倒着拿手机,手机拍进去的照片就是倒的
这是垂直竖拍
这是垂直横拍
垂直状况下,你怎么拿手机,拍进去的方向都是一个
所以,其实手机端在拍摄的时候曾经帮咱们旋转到了适合的方向,不须要咱们再进行旋转了。然而,照片信息仍然保留了该照片的拍摄方向,所以,在 Android 上,Android 再一次依据拍摄方向主动做了旋转,后果就是转过了,导致 Android 的图片显示不对。
所以,咱们要做的,仅仅应该是勾销 EXIF 信息,而不是旋转。
小彩蛋,到这其实根本就完结了,然而,程度状况下呢,手机拍照又是什么状况呢
当你手机和高空平行,拍摄高空,你会发现,拍进去的照片就是最后的样子,横着拍,照片就是横的,竖着拍。照片就是竖的,手机这是没有做解决,你感觉是为什么呢