1. npm下载exif-js包 文档
npm install exif-js --save用于获取图片的旋转状态
2.压缩旋转
compressImg(img, fileName) { // 压缩图片 let Orientation = this.getExif(img); // 获取图片角度 1:0°正常 3:180° 6:顺时针90° 8: 逆时针90° let canvas = document.createElement("canvas"); let ctx = canvas.getContext("2d"); //瓦片canvas let tCanvas = document.createElement("canvas"); let tctx = tCanvas.getContext("2d"); let width = img.width; let height = img.height; // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下 let ratio; if ((ratio = (width * height) / 4000000) > 1) { ratio = Math.sqrt(ratio); width /= ratio; height /= ratio; } else { ratio = 1; } canvas.width = width; canvas.height = height; // 铺底色 ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, canvas.width, canvas.height); //如果图片像素大于100万则使用瓦片绘制 let count; if ((count = (width * height) / 1000000) > 1) { count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片 // 计算每块瓦片的宽和高 let nw = ~~(width / count); let nh = ~~(height / count); tCanvas.width = nw; tCanvas.height = nh; for (let i = 0; i < count; i++) { for (let j = 0; j < count; j++) { tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh); ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh); } } } else { ctx.drawImage(img, 0, 0, width, height) } if (Orientation && Orientation !== 1) { switch (Orientation) { case 6: canvas.width = height canvas.height = width ctx.rotate(Math.PI / 2) ctx.drawImage(img, 0, -height, width, height) console.log('旋转'); break case 3: ctx.rotate(Math.PI) ctx.drawImage(img, -width, -height, width, height) break case 8: canvas.width = height canvas.height = width ctx.rotate(3 * Math.PI / 2) ctx.drawImage(img, -width, 0, width, height) break } } //进行最小压缩 let ndata = canvas.toDataURL("image/jpeg", 0.1); tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0; //将base64转换为文件 let arr = ndata.split(','); let mime = arr[0].match(/:(.*?);/)[1]; let bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n] = bstr.charCodeAt(n); } return new File([u8arr], fileName, {type:mime}); }, getExif(file) { // 获取图片旋转方向 let Orientation = ''; Exif.getData(file, function() { Orientation = Exif.getTag(this, 'Orientation'); }); return Orientation; },