解决iOS拍照后图片自动旋转90度

本文介绍了一个使用jQuery插件实现的图片上传和处理功能,包括图片的预览、旋转和压缩。通过EXIF库读取图片的旋转信息,并根据不同设备进行相应的处理,确保上传的图片在各种设备上都能正确显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!--引用-->
<script src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/exif.js"></script>
<script src="../js/localResizeIMG.js"></script>
<script src="../js/mobileBUGFix.mini.js"></script>
<!--修改localResizeIMG.js-->
$.fn.localResizeIMG = function(obj) {
	this.on('change', function() {
		var file = this.files[0];
		var URL = window.URL || window.webkitURL;
		var blob = URL.createObjectURL(file);

		if ($.isFunction(obj.before)) {
			obj.before(this, blob, file)
		};
		_create(blob, file);
		this.value = '';
	});

	function _create(blob, file) {
		var img = new Image();
		img.src = blob;
		var orient = null;
		EXIF.getData(file, function() {
			//判断图片是否旋转
			EXIF.getAllTags(this);
			orient = EXIF.getTag(this, 'Orientation');
		});
		img.onload = function() {
			var that = this;
			var w = that.width,
				h = that.height,
				scale = w / h;
			w = obj.width || w;
			h = w / scale;
			var canvas = document.createElement('canvas');
			var ctx = canvas.getContext('2d');
			$(canvas).attr({
				width: w,
				height: h
			});
			ctx.drawImage(that, 0, 0, w, h);
			var base64 = null;
			if (navigator.userAgent.match(/iphone/i)) {
				if (orient != "" && orient != 1) {
					switch (orient) {
						case 6: //需要顺时针(向左)90度旋转
							rotateImg(this, 'left', canvas);
							break;
						case 8: //需要逆时针(向右)90度旋转
							rotateImg(this, 'right', canvas);
							break;
						case 3: //需要180度旋转
							rotateImg(this, 'right', canvas); //转两次
							rotateImg(this, 'right', canvas);
							break;
					}
				}
				// var mpImg = new MegaPixImage(img);
				// mpImg.render(canvas, {
				// 	maxWidth: w,
				// 	maxHeight: h,
				// 	quality: obj.quality || 0.8
				// });
				// base64 = canvas.toDataURL('image/jpeg', obj.quality || 0.8);
				base64 = canvas.toDataURL("image/jpeg", 0.8);
			} else if (navigator.userAgent.match(/Android/i)) {
				var encoder = new JPEGEncoder();
				base64 = encoder.encode(ctx.getImageData(0, 0, w, h), obj.quality * 100 || 80);
			} else {
				if (orient != "" && orient != 1) {
					switch (orient) {
						case 6: //需要顺时针(向左)90度旋转
							rotateImg(this, 'left', canvas);
							break;
						case 8: //需要逆时针(向右)90度旋转
							rotateImg(this, 'right', canvas);
							break;
						case 3: //需要180度旋转
							rotateImg(this, 'right', canvas); //转两次
							rotateImg(this, 'right', canvas);
							break;
					}
				}
				base64 = canvas.toDataURL("image/jpeg", 0.8);
			}

			var result = {
				base64: base64,
				clearBase64: base64.substr(base64.indexOf(',') + 1)
			};
			obj.success(result);
		};
	}


	function rotateImg(img, direction, canvas) {
		//alert(img); 
		//最小与最大旋转方向,图片旋转4次后回到原方向  
		var min_step = 0;
		var max_step = 3;
		//var img = document.getElementById(pid);  
		if (img == null) return;
		//img的高度和宽度不能在img元素隐藏后获取,否则会出错  
		var height = img.height;
		var width = img.width;
		//var step = img.getAttribute('step');  
		var step = 2;
		if (step == null) {
			step = min_step;
		}
		if (direction == 'right') {
			step++;
			//旋转到原位置,即超过最大值  
			step > max_step && (step = min_step);
		} else {
			step--;
			step < min_step && (step = max_step);
		}
		//img.setAttribute('step', step);  
		/*var canvas = document.getElementById('pic_' + pid);  
		if (canvas == null) {  
		  img.style.display = 'none';  
		  canvas = document.createElement('canvas');  
		  canvas.setAttribute('id', 'pic_' + pid);  
		  img.parentNode.appendChild(canvas);  
		} */
		//旋转角度以弧度值为参数  
		var degree = step * 90 * Math.PI / 180;
		var ctx = canvas.getContext('2d');
		switch (step) {
			case 0:
				canvas.width = width;
				canvas.height = height;
				ctx.drawImage(img, 0, 0);
				break;
			case 1:
				canvas.width = height;
				canvas.height = width;
				ctx.rotate(degree);
				ctx.drawImage(img, 0, -height);
				break;
			case 2:
				canvas.width = width;
				canvas.height = height;
				ctx.rotate(degree);
				ctx.drawImage(img, -width, -height);
				break;
			case 3:
				canvas.width = height;
				canvas.height = width;
				ctx.rotate(degree);
				ctx.drawImage(img, -width, 0);
				break;
		}
	}

};

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值