前端只能简单压缩一次，循环压缩 安卓没问题 iphone 会卡死机
安装exif-js
cnpm i exif-js --savenpm i exif-js --save
当前页面引入
import EXIF from 'exif-js'
html 代码<label for='uploadOne' class='photo-main' ><div class="show"><div class="picture"><img style="width:100%" :src="url" alt=""></div></div></label><div v-show="false"><van-uploader id="uploadOne" max-count="1" :after-read="afterReadOne" ></van-uploader></div>`
afterReadOne(file){this.imgData(file)},imgData(file){this.global.loadingStart('正在上传图片,请稍等……')this.url = file.contentlet img = document.createElement('img')img.src = file.contentlet num = ''let base64 = file.contentif(base64.length/1024*3/4 < 200){// 500k 以内num = 0.9}else if(base64.length/1024*3/4 > 500 && base64.length/1024*3/4 <= 1024){// 500k 到 1Mnum = 0.8}else if(base64.length/1024*3/4 > 1024 && base64.length/1024*3/4 <= 3072){// 1M 到 3Mnum = 0.4}else if(base64.length/1024*3/4 > 3072 && base64.length/1024*3/4 <= 5120){// 3M 到 5Mnum = 0.2}else if(base64.length/1024*3/4 > 5120 && base64.length/1024*3/4 <= 8192){num = 0.15}else if(base64.length/1024*3/4 > 8192 && base64.length/1024*3/4 <= 10240){num = 0.08}else{num = 0.04}this.canvasDataURL(img,{'quality' :num}, file.file.type)},canvasDataURL(img,obj,type){img.onload = () =>{let width = img.width,height = img.height;let orient = this.getPhotoOrientation(img)let quality = 0.7;let canvas = document.createElement('canvas');let ctx = canvas.getContext('2d');let max_width = 1600let max_height = 900if(height>width){max_width = 900;max_height = 1600;}if (width > max_width) {height *= max_width / width;height = Math.round(height);width = max_width;}if (height > max_height) {width *= max_height / height;width = Math.round(width);height = max_height;}if(width < max_width&&height < max_height){width = max_width;height = max_height;}if (orient == 6) {canvas.width = height;canvas.height = width;ctx.save();//保存状态ctx.translate(0, 0);//设置画布上的(0,0)位置，也就是旋转的中心点// 执行Canvas的drawImage语句ctx.rotate(90 * Math.PI / 180);//把画布旋转90度ctx.drawImage(img, 0, -height, width, height);//把图片绘制在画布translate之前的中心点，ctx.restore();} else if (orient == 8) {canvas.width = width;canvas.height = height;ctx.save();//保存状态ctx.translate(0, 0);//设置画布上的(0,0)位置，也就是旋转的中心点// 执行Canvas的drawImage语句ctx.rotate(270 * Math.PI / 180);//把画布旋转90度ctx.drawImage(img, -width, 0, width, height);//把图片绘制在画布translate之前的中心点，ctx.restore();} else if (orient == 3) {canvas.width = width;canvas.height = height;ctx.save();//保存状态ctx.translate(0, 0);//设置画布上的(0,0)位置，也就是旋转的中心点// 执行Canvas的drawImage语句ctx.rotate(-180 * Math.PI / 180);//把画布旋转90度ctx.drawImage(img, -width, -height, width, height);//把图片绘制在画布translate之前的中心点，ctx.restore();} else {canvas.width = width;canvas.height = height;ctx.drawImage(img, 0, 0, width, height);}var basePx=canvas.width;//字体大小 照片添加水印var fontSize=basePx/25;ctx.shadowColor = 'rgba(0, 0, 0,1)';ctx.shadowOffsetX = 3;ctx.shadowOffsetY = 3;ctx.shadowBlur = 5;ctx.font = fontSize+"px 微软雅黑";ctx.fillStyle = "rgba(255,255,255,0.8)";var watermark = "水印" + "|" + '-12-07 11:47' + "|" ;var watermarkSplit = watermark.split("|");ctx.fillText(watermarkSplit[0],canvas.width-watermarkSplit[0].length*fontSize,canvas.height-2.7*fontSize);ctx.fillText(watermarkSplit[1],canvas.width-watermarkSplit[0].length*fontSize,canvas.height-1.5*fontSize);ctx.fillText(watermarkSplit[2],canvas.width-watermarkSplit[0].length*fontSize,canvas.height-0.5*fontSize);if(obj.quality && obj.quality <= 1 && obj.quality > 0){quality = obj.quality;}let base64 = canvas.toDataURL(type, quality);if (base64.length/1024*3/4 < 10) {this.$dialog.alert({message:"图片质量过低，请重新上传！"}).then(()=>{return ''})return '';} else {// 调用接口}}},getPhotoOrientation(img) {var orient;EXIF.getData(img, function () {orient = EXIF.getTag(this, 'Orientation');});return orient;},
