/** * imageUtil.js *解决图片旋转的问题 * **/ import EXIF from "./exif.js"; async function compressImage(path) { let imageInfo = await getImageInfo(path); let systemInfo = await getSystemInfo(); return new Promise(function (resolve, reject) { // #ifdef APP-PLUS || APP-NVUE appCompressImage(path, imageInfo) .then((res) => { resolve(res); }) .catch((e) => { reject(e); }); // #endif // #ifdef H5 let orientation = 1; let img = document.createElement("img"); img.src = path; img.onload = function () { EXIF.getData(img, function () { orientation = EXIF.getTag(this, "Orientation"); canvasImg(path, orientation, imageInfo, systemInfo) .then((res) => { debugger; resolve(res); }) .catch((e) => { reject(e); }); }); }; img.onerror = function () { reject(path); }; // #endif }); } // app处理旋转图片 function appCompressImage(src, imageInfo) { return new Promise(function (resolve, reject) { let orientation = imageInfo.orientation; let rotate = 0; let quality = 80; if (plus.os.name == "iOS") { rotate = 0; quality = 25; } else { switch (orientation) { case "up": //exif:1 不旋转 rotate = 0; break; case "down": //exif:3 旋转180度 rotate = 180; break; case "right": //exif:6 旋转90度 rotate = 90; break; case "left": //exif:8 旋转270度 rotate = 270; break; default: rotate = 0; break; } } plus.zip.compressImage( { src: src, dst: "_doc/uniapp_temp" + "/compressed/" + Math.round(new Date()) + ".png", format: "png", quality: quality, width: "auto", height: "auto", rotate: rotate, }, function (event) { resolve(event.target); }, function (error) { reject(src); } ); }); } // 画图片 function canvasImg(path, or, imageInfo, systemInfo) { return new Promise(function (resolve, reject) { let canvasId = "uploadCanvas"; const ctx = uni.createCanvasContext(canvasId); let scale = imageInfo.width / imageInfo.height; // 图片参数 start let maxdestWidth = 1100; // 2000; let destWidth = imageInfo.width; let destHeight = imageInfo.height; let destCompressWidth = imageInfo.width; let destCompressHeight = imageInfo.height; // 压缩图片 最大不超过5M 1200 // 当宽大于高的时候 if (imageInfo.width > imageInfo.height) { if (imageInfo.width > maxdestWidth) { destCompressWidth = maxdestWidth; destCompressHeight = Math.floor(destCompressWidth / scale); } else { destCompressWidth = (imageInfo.width * 8) / 10; destCompressHeight = Math.floor(destCompressWidth / scale); } } // 当高大于宽 else { if (imageInfo.height > maxdestWidth) { destCompressHeight = maxdestWidth; destCompressWidth = Math.floor(destCompressHeight * scale); } else { destCompressHeight = imageInfo.height * 0.8; destCompressWidth = Math.floor(destCompressHeight * scale); } } destWidth = destCompressHeight; destHeight = destCompressWidth; // 图片参数 end // 画布参数 start let maxWidth = 300; let canvasW = imageInfo.width; let canvasH = imageInfo.height; let width = imageInfo.width; let height = imageInfo.height; // canvas画布不能超过最大宽 if (canvasW > maxWidth) { canvasW = maxWidth; canvasH = Math.floor(canvasW / scale); } width = canvasW; height = canvasH; // 画布参数 end // console.log('--or---', or) //单独处理苹果最新版本 if ( systemInfo.model == "iPhone" && systemInfo.system.indexOf("13.4.1") > -1 ) { ctx.drawImage(path, 0, 0, canvasW, canvasH); destWidth = destCompressWidth; destHeight = destCompressHeight; } else { if (or == 6) { //逆时针旋转了90 ctx.translate(width, 0); ctx.rotate(Math.PI / 2); ctx.drawImage(path, 0, 0, canvasH, canvasW); } else if (or == 3) { //逆时针旋转了180 ctx.translate(width, height); ctx.rotate(Math.PI); ctx.drawImage(path, 0, 0, canvasH, canvasW); } else if (or == 8) { //顺时针旋转90 ctx.translate(0, height); ctx.rotate(-Math.PI / 2); ctx.drawImage(path, 0, 0, canvasH, canvasW); } else { ctx.drawImage(path, 0, 0, canvasW, canvasH); // return resolve(path); destWidth = destCompressWidth; destHeight = destCompressHeight; } } // console.log('图片原始长宽', imageInfo, maxWidth, canvasW, canvasH, width, height, destWidth, destHeight); ctx.draw( true, setTimeout(() => { uni.canvasToTempFilePath({ x: 0, y: 0, width: width, //画布宽度 height: height, destWidth: destWidth, destHeight: destHeight, fileType: "png", canvasId: canvasId, success: (res) => { resolve(res.tempFilePath); }, fail: (err) => { resolve(path); }, }); }, 200) ); }); } // 获取图片信息 function getImageInfo(path) { return new Promise(function (resolve, reject) { // #ifdef APP-PLUS plus.io.getImageInfo({ src: path, success: function (image) { // console.log('orientation=' + image.orientation); resolve(image); }, fail: function (err) { console.log("getImageInfoErr: " + JSON.stringify(err)); reject(err); }, }); // #endif // #ifdef H5 || MP-WEIXIN uni.getImageInfo({ src: path, success: function (image) { // console.log('orientation=' + image.orientation); resolve(image); }, fail: function (err) { console.log("getImageInfoErr: " + JSON.stringify(err)); reject(err); }, }); // #endif }); } // 获取系统信息 function getSystemInfo(path) { return new Promise(function (resolve, reject) { uni.getSystemInfo({ success(res) { resolve(res); }, fail(err) { console.log("getSystemInfoErr: " + JSON.stringify(err)); reject(err); }, }); }); } export default compressImage;