第一步 cnpm install exif-js --save
//url 就是上面获取到的blod地址 imgname是文件名 这个方法在你选择完照片的调用 吧地址 和名字穿过来
async detail(url,imgname){
let maxWidth = 500;
let Orientation = 1;
//获取图片META信息
await this.getImageTag(url, 'Orientation', (e)=> {
if(e != undefined) Orientation = e;
})
var img = null;
var canvas = null;
await this.comprossImage(url, maxWidth, (e) =>{
img = e.img;
canvas = e.canvas;
})
console.log(Orientation,"Orientation")
let baseStr = '';
//如果方向角不为1,都需要进行旋转
switch(Orientation){
case 6://需要顺时针(向右)90度旋转
baseStr = this.rotateImg(img,'right',canvas);
break;
case 8://需要逆时针(向左)90度旋转
baseStr = this.rotateImg(img,'left',canvas);
break;
case 3://需要180度旋转 转两次
baseStr = this.rotateImg(img,'right',canvas, 2);
break;
default:
baseStr = this.rotateImg(img,'',canvas);
break;
}
console.log(baseStr,"baseStr")
let file = this.base64ToFile(
baseStr,
imgname
);
console.log(file)
this.formItem.file=file
},
//-------------------------------直接粘贴的三个方法
async comprossImage(imgSrc, maxWidth, func){
if(!imgSrc) return 0;
return new Promise((resolve, reject) => {
uni.getImageInfo({
src: imgSrc,
success(res) {
let img = new Image();
img.src = res.path;
console.log(img)
let canvas = document.createElement('canvas');
let obj = new Object();
obj.img = img;
obj.canvas = canvas;
resolve(func(obj));
}
});
})
},
/**
* @desc 获取图片信息,使用exif.js库,具体用法请在github中搜索
* @param {Object} file 上传的图片文件
* @param {String} tag 需要获取的信息 例如:'Orientation'旋转信息
* @return {Promise<Any>} 读取是个异步操作,返回指定的图片信息
*/
getImageTag(file, tag, suc){
if (!file) return 0;
return new Promise((resolve, reject) => {
/* eslint-disable func-names */
// 箭头函数会修改this,所以这里不能用箭头函数
let imgObj = new Image()
imgObj.src = file
console.log(imgObj)
uni.getImageInfo({
src: file,
success(res) {
EXIF.getData(imgObj, function () {
EXIF.getAllTags(this);
let or = EXIF.getTag(this,'Orientation');//这个Orientation 就是我们判断需不需要旋转的值了,有1、3、6、8
resolve(suc(or))
});
}
})
});
},
rotateImg(img, direction, canvas, times = 1){
console.log('开始旋转')
//最小与最大旋转方向,图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
if (img == null)return;
//img的高度和宽度不能在img元素隐藏后获取,否则会出错
var height = img.height;
var width = img.width;
let maxWidth = 500;
let canvasWidth = width; //图片原始长宽
let canvasHeight = height;
let base = canvasWidth/canvasHeight;
console.log(maxWidth);
if(canvasWidth > maxWidth){
canvasWidth = maxWidth;
canvasHeight = Math.floor(canvasWidth/base);
}
width = canvasWidth;
height = canvasHeight;
var step = 0;
if (step == null) {
step = min_step;
}
if (direction == 'right') {
step += times;
//旋转到原位置,即超过最大值
step > max_step && (step = min_step);
} else if(direction == 'left'){
step -= times;
step < min_step && (step = max_step);
} else { //不旋转
step = 0;
}
//旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
console.log(degree)
console.log(step)
switch (step) {
case 1:
console.log('右旋转 90度')
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height, width, height);
break;
case 2:
//console.log('旋转 180度')
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height, width, height);
break;
case 3:
console.log('左旋转 90度')
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0, width, height);
break;
default: //不旋转
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
break;
}
let baseStr = canvas.toDataURL("image/jpeg", 1);
return baseStr;
},
///这个方法吧base64转成文件的方法
base64ToFile(urlData, fileName) {
//base64转File
let arr = urlData.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bytes = atob(arr[1]); // 解码base64
let n = bytes.length;
let ia = new Uint8Array(n);
while (n--) {
ia[n] = bytes.charCodeAt(n);
}
return new File([ia], fileName, {
type: mime
});
},**加粗样式**