第一步 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 prossImage(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转Filelet arr = urlData.split(",");let mime = arr[0].match(/:(.*?);/)[1];let bytes = atob(arr[1]); // 解码base64let n = bytes.length;let ia = new Uint8Array(n);while (n--) {ia[n] = bytes.charCodeAt(n);}return new File([ia], fileName, {type: mime});},**加粗样式**
