js使用base64 上传图片解决iOS手机竖屏拍摄图片发生旋转问题

685 阅读1分钟

###iOS上拍摄/储存的图片会附带属性orientation(方向角)。这个属性会影响图片的显示方向。可以通过插件 exif.js 获取此属性。 使用插件 mobileBUGFix 调整方向角。

###新建js upload.js


    $.fn.UploadImg = function(o) {
    	this.change(function() {
    		var file = this.files['0'];
    		console.log(file);
    		$('#error').html(file.type);
    		if(file.size && file.size > o.mixsize) {
    			o.error('大小超过限制');
    			this.value = '';
    		} else if(o.type && o.type.indexOf(file.type) < 0) {
    			o.error('格式不正确');
    			this.value = '';
    		} else {
    			var URL = URL || webkitURL;
    			var blob = URL.createObjectURL(file);
    			o.before(blob);
    			_compress(blob, file);
    			this.value = '';
    		}
    	});

    	function _compress(blob, file) {
    		var img = new Image();
    		img.src = blob;
    		img.onload = function() {
    			var canvas = document.createElement('canvas');
    			var ctx = canvas.getContext('2d');
    			if(!o.width && !o.height && o.quality == 1) {
    				var w = this.width;
    				var h = this.height;
    			} else {
    				var w = o.width || this.width;
    				var h = o.height || w / this.width * this.height;
    			}
    			$(canvas).attr({
    				width: w,
    				height: h
    			});
    			ctx.drawImage(this, 0, 0, w, h);
    			var base64 = canvas.toDataURL(file.type, (o.quality || 0.8) * 1);
    			if(navigator.userAgent.match(/iphone/i)) {
    				var myorientation = 0;
    				EXIF.getData(file, function() {
    					//图片方向角  
    					var Orientation = null;
    					// alert(EXIF.pretty(this));  
    					EXIF.getAllTags(this);
    					//alert(EXIF.getTag(this, 'Orientation')); 
    					myorientation = EXIF.getTag(this, 'Orientation');
    					//return;  

    					//  					alert(myorientation.toString());
    					var mpImg = new MegaPixImage(img);
    					mpImg.render(canvas, {
    						maxWidth: w,
    						maxHeight: h,
    						quality: o.quality || 0.8,
    						orientation: myorientation
    					});
    					base64 = canvas.toDataURL(file.type, o.quality || 0.8);
    					_ajaximg(base64, file.type);
    				});
    			}

    			// 修复android
    			if(navigator.userAgent.match(/Android/i)) {
    				var encoder = new JPEGEncoder();
    				base64 = encoder.encode(ctx.getImageData(0, 0, w, h), o.quality * 100 || 80);
    				_ajaximg(base64, file.type);
    			}

    		};
    	}

    	function _ajaximg(base64, type, file) {
    		$.post(o.url, {
    			base64Img: base64
    		}, function(res) {
    			var res = eval('(' + res + ')');
    			if(res.status == 1) {
    				o.error(res.msg);
    			} else {
    				o.success(res.imgurl);
    			}
    			console.log(res);
    		});

    	}
    };

###使用方法

		$('#thumbnail').UploadImg({
			url: url,
			width: '320',
			height: '320',
			quality: '0.8', //压缩率,默认值为0.8
			// 如果quality是1 宽和高都未设定 则上传原图
			mixsize: '10000000',
			//type : 'image/png,image/jpg,image/jpeg,image/pjpeg,image/gif,image/bmp,image/x-png',
			before: function(blob) {
				var imageMy = $('#my_face');
				imageMy.attr('src', blob);
			},
			error: function(res) {
				alert('error');
			},
			success: function(res) {
				alert('success');

			}
		});