uniapp虽然在某种情况下是个很好用的框架，但还是避免不了踩坑，而坑在社区或官网或百度里都没法找到能立即适用的解决方案。今天遇到的一个大问题就是使用uni.chooseImage上传图片或者拍照在部分手机上图片出现旋转，同时就算设置了压缩结局还是没有压缩图片的问题。
今天我给大家一份完整的解决方案，就目前运行的项目来说，oppo, 小米，苹果的手机出现旋转角度有顺时针，逆时针90度以及旋转180度等问题，目前测试均无问题。
因时间问题，有些地方代码不一定是最简洁的，大家如果有更好的方式欢迎大家留言，共同学习进步。
第一步，我们必须要知道图片旋转的方向（exifjs库是可以拿到图片的很多信息包括方向，但在uniapp中无法使用，所以这里没有用，但大家可以尝试），uni.getImageInfo号称是可以拿到该值，但经过实验没有拿到，所以我换了种方式，该方式其实在网上也可搜索到，我们直接看源码:
export const common = {
// 这里的获取exif要将图片转ArrayBuffer对象，这里假设获取了图片的baes64
// 步骤一
// base64转ArrayBuffer对象
base64ToArrayBuffer: (base64) => {
base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
var binary = atob(base64); //atob() 方法用于解码使用 base-64 编码的字符串，windows对象里的方法
var len = binary.length;
var buffer = new ArrayBuffer(len); // 创建一个binary.length字节的ArrayBuffer
var view = new Uint8Array(buffer);//创建一个buffer的引用，类型是Uint8，起始位置在0，结束位置为缓冲区尾部
for (var i = 0; i < len; i++) {
view[i] = binary.charCodeAt(i); //在引用指定位置里存入指定位置的字符的 Unicode 编码
}
return buffer; //最终生成一个数组缓冲区，里面存储了该base64图片的二进制信息 ，为了后续通过底层接口拿到多种数值类型
},
// 步骤二，Unicode码转字符串
// ArrayBuffer对象 Unicode码转字符串
getStringFromCharCode: (dataView, start, length) => {
var str = '';
var i;
for (i = start, length += start; i < length; i++) {
str += String.fromCharCode(dataView.getUint8(i));
}
return str; //将第一步中的二进制ArrayBuffer对象生成的unicode的码转成字符串
},
// 步骤三，获取jpg图片的exif的角度（在ios体现最明显）下面很多都是为了获取图片数值的底层信息，陌生的大家可以一个个查，或者去看extjs官网
getOrientation: (arrayBuffer) => {
var dataView = new DataView(arrayBuffer); //可以从 二进制[`ArrayBuffer`]对象中读写多种数值类型的底层接口
var length = dataView.byteLength;
var orientation;
var exifIDCode;
var tiffOffset;
var firstIFDOffset;
var littleEndian;
var endianness;
var app1Start;
var ifdStart;
var offset;
var i;
// Only handle JPEG image (start by 0xFFD8)
if (dataView.getUint8(0) === 0xFF && dataView.getUint8(1) === 0xD8) {
offset = 2;
while (offset < length) {
if (dataView.getUint8(offset) === 0xFF && dataView.getUint8(offset + 1) === 0xE1) {
app1Start = offset;
break;
}
offset++;
}
}
if (app1Start) {
exifIDCode = app1Start + 4;
tiffOffset = app1Start + 10;
if (common.getStringFromCharCode(dataView, exifIDCode, 4) === 'Exif') {
endianness = dataView.getUint16(tiffOffset);
littleEndian = endianness === 0x4949;
if (littleEndian || endianness === 0x4D4D /* bigEndian */ ) {
if (dataView.getUint16(tiffOffset + 2, littleEndian) === 0x002A) {
firstIFDOffset = dataView.getUint32(tiffOffset + 4, littleEndian);
if (firstIFDOffset >= 0x00000008) {
ifdStart = tiffOffset + firstIFDOffset;
}
}
}
}
}
if (ifdStart) {
length = dataView.getUint16(ifdStart, littleEndian);
var standalone = window.navigator.standalone,
userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test(userAgent),
ios = /iphone|ipod|ipad/.test(userAgent);
for (i = 0; i < length; i++) {
offset = ifdStart + i * 12 + 2;
if (dataView.getUint16(offset, littleEndian) === 0x0112 /* Orientation */ ) {
// 8 is the offset of the current tag's value
offset += 8;
// Get the original orientation value
orientation = dataView.getUint16(offset, littleEndian);
// Override the orientation with its default value for Safari (#120)
// if (IS_SAFARI_OR_UIWEBVIEW) {
// dataView.setUint16(offset, 1, littleEndian);
// }
if (ios) {
if (!standalone && safari) {
dataView.setUint16(offset, 1, littleEndian);
} else if (standalone && !safari) {
//standalone
} else if (!standalone && !safari) {
dataView.setUint16(offset, 1, littleEndian);
};
}
break;
}
}
}
return orientation;
}
}
第二步，获取图片的旋转方向并压缩：
urlTobase64(url) {
uni.request({
url: url,
method: 'GET',
responseType: 'arraybuffer',
success: (res)=> {
let base64 = uni.arrayBufferToBase64(res.data); //把arraybuffer转成base64
base64 = 'data:image/jpeg;base64,' + base64; //不加上这串字符，在页面无法显示
const or=common.getOrientation(common.base64ToArrayBuffer(base64))
this.or=or
this.compressImg(base64,or)
}
});
},
第三步，对需要旋转的图片旋转，压缩，这里设置的canvas的width=300,height=400。里面值需要以此为参考换算:
compressImg(img,or){
const ctx = uni.createCanvasContext('myCanvas')
console.log(or)
if(or==6){//逆时针旋转了90
ctx.translate(300,0)
ctx.rotate(Math.PI/2)
ctx.drawImage(img, 0, 0,400, 300)
}else if(or==3){//逆时针旋转了180
ctx.translate(300,400)
ctx.rotate(Math.PI)
ctx.drawImage(img, 0, 0,400, 300)
}else if(or==8){//顺时针旋转90
ctx.translate(0,400)
ctx.rotate(-Math.PI/2)
ctx.drawImage(img, 0, 0,400, 300)
}else{
ctx.drawImage(img, 0, 0,300, 400)
}
ctx.draw(false,()=>{
uni.canvasToTempFilePath({
x: 0,
y: 0,
width: 300,
height:400,
destWidth:300,
destHeight:400,
fileType:'jpg',
canvasId: 'myCanvas',
success:(res)=> {
this.img=res.tempFilePath
},
fail:(err)=>{
this.img=img
}
})
})
},
第四步，通过uni.chooseImage上传图片：
// 选择图片
ChooseImage() {
uni.showLoading({
title: '照片获取中',
mask: true
});
uni.chooseImage({
count: 1, //默认9
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], //从相册选择
success: (res) => {
this.urlTobase64(res.tempFilePaths[0])
uni.hideLoading()
},
fail:(err)=>{
uni.hideLoading()
}
});
},
至此，一套完整的方案就已经产生了。希望能帮到需要的朋友。
网友评论