uniapp解决上传图片旋转90度问题

喜欢ヅ旅行 2023-06-30 08:59 22阅读 0赞

import compressImage from '@/common/imageutil.js'（文章最后）;

const device = uni.getSystemInfoSync();

<wslimg title="图片上传" :num="40" :dataList="dataList" @chooseImg="chooseImg" @close="close($event)"></wslimg>
    		 <view style="color: #00BFFF;padding: 10upx;"><progress :percent="percent" show-info  strock-width="10"></progress></view> 
    		<view class="btn-logout" hover-class="btn-logout-hover" @tap="uploadImg()">
    			<text>开始上传</text>
    		</view>

chooseImg() {
    				uni.chooseImage({
    					sourceType: ["camera", "album"],
    					sizeType: ['original'],
    					count: this.num - this.dataList.length,
    					success: async (res) => {
    						const tempFilePaths = res.tempFilePaths;
    						let tempPathList = [];
    						for (let i = 0; i < tempFilePaths.length; i++) {
    							const path = tempFilePaths[i];
    							const src = await this.compressImageHandler(path)
    							tempPathList.push(src);
    						}
    						this.dataList = this.dataList.concat(tempPathList);
    						console.log(this.dataList.length+"========")
    					}
    				})
    }，
    	async compressImageHandler(src){
    				console.log('platform==='+device.platform)
    				const tempPath = await compressImage(src,device.platform);
    				console.log('tempPath-----'+tempPath);
    				return tempPath
    			},

imageutil.js

async function compressImage(src, platform) {
    	const imageInfo = await getImageInfo(src);
    	const orientation = imageInfo.orientation;
    	let rotate = 0;
    	let quality = 80;
    	if (platform === '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;
    		}
    	}
    	return new Promise(function(resolve, reject) {
    		plus.zip.compressImage({
    				src: src,
    				dst: "_doc/uniapp_temp" + '/compressed/' + Math.round(new Date()) + '.jpg',
    				format: 'jpg',
    				quality: quality,
    				width: 'auto',
    				height: 'auto',
    				rotate: rotate,
    			},
    			function(event) {
    				let tempPath = event.target;
    				resolve(tempPath)
    			},
    			function(error) {
    				reject(error);
    			});
    	})
    }
    
    function getImageInfo(path) {
    	return new Promise(function(resolve, reject) {
    		// #ifdef APP-PLUS
    		plus.io.getImageInfo({
    			src: path,
    			success: function(image) {
    				// console.log(image.width);
    				// console.log(image.height);
    				// console.log('orientation=' + image.orientation);
    				// console.log('path=' + image.path);
    				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(image.width);
    				// console.log(image.height);
    				// console.log('orientation=' + image.orientation);
    				// console.log('path=' + image.path);
    				resolve(image)
    			},
    			fail: function(err) {
    				console.log("getImageInfoErr: " + JSON.stringify(err));
    				reject(err)
    			}
    		});
    		// #endif
    	});
    }
    
    export default compressImage