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

最新推荐文章于 2024-07-25 11:20:08 发布

河上街

最新推荐文章于 2024-07-25 11:20:08 发布

阅读量9.7k

点赞数 4

分类专栏： uni-app

本文链接：https://blog.csdn.net/liujucai/article/details/104004020

版权

uni-app 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

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><!-- <text style="color: #00BFFF;margin-left: 48%;">{{percent}}%</text> --></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