移动端 H5 上传图片 ios拍照上传横屏显示

今天药忘吃喽~ 2023-01-09 14:27 228阅读 0赞

###### 问题描述： ######

###### ios上传图片到服务器，渲染到页面上之后会旋转90度,android显示正常。 ######

##### 上传图片方案： #####

###### 选择按钮change事件，实例化fileReader,调它的readAsDataURL并把原生File对象传给它， 监听它的onload事件，load完读取的结果就在它的result属性里了。它是一个base64格式的，可直接赋值给一个img的src. ######

##### ios拍照上传横屏方案： #####

###### ios相机拍照时自动加入了方向传感器（Orientation属性 ），能够记录相机拍摄的方向，相机可以根据这个方向信息，系统会对照片进行旋转，我们可以根据图片信息所提供EXIF(可交换图像文件格式:Exchangeable image file format)，Orientation 旋转等来判断图片是否上传前图片是否需要相应的旋转 ######

![https://www.jianshu.com/p/c919be8d8ec1?from=singlemessage来自这位简书作者][https_www.jianshu.com_p_c919be8d8ec1_from_singlemessage]

###### 具体的旋转方案就是利用画布，先把图片放到画布，转换base64 ，转换回图片文件 上传到服务器 ######

$file.on('change', function(e) {
    		if(canclick) {
    			curFile = this.files;
    			fileList = fileList.concat(Array.from(curFile));
    			if($(".file-list").length <= 0) {
    				$("#choose-file").attr("title", "未选择文件");
    			} else {
    				for(var i = 0, len = curFile.length; i < len; i++) {
    					if(/^image\/(jpg|jpeg|png|JPG|JPEG|PNG)$/.test(fileType)) {
    						fileTypes.push(fileType.split('/')[1])
    						reviewFile(curFile[i])
    						$('.file-list').fadeIn(2500);
    					} else {
    						layer.msg("只支持jpeg|png|jpg图片格式");
    					}
    				}
    				$("#choose-file").attr("title", "");
    			}
    		} else {
    			layer.msg("已上传过图片,无法选择。")
    		}
    	});
    
    	function reviewFile(file) {
    		var base64 = null;
    		var Orientation = null;
    		if(file) {
    			console.log("正在上传,请稍后...");
    			var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
    			if(!rFilter.test(file.type)) {
    				return;
    			}
    
    			//获取照片方向角属性，用户旋转控制
    			EXIF.getData(file, function() {
    				//alert(EXIF.pretty(this));
    				EXIF.getAllTags(this);
    				//alert(EXIF.getTag(this, 'Orientation'));
    				Orientation = EXIF.getTag(this, 'Orientation');
    				//return;
    			});
    			var oReader = new FileReader();
    			oReader.onload = function(e) {
    				var image = new Image();
    				image.src = e.target.result;
    				image.onload = function() {
    					var expectWidth = this.naturalWidth;
    					var expectHeight = this.naturalHeight;
    					if(this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {
    						expectWidth = 800;
    						expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;
    					} else if(this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {
    						expectHeight = 1200;
    						expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;
    					}
    
    					var canvas = document.createElement("canvas");
    					var ctx = canvas.getContext("2d");
    					canvas.width = expectWidth;
    					canvas.height = expectHeight;
    					ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
    					var u = navigator.userAgent;
    
    					//修复ios
    					if(u.match(/iphone/i)) {
    						console.log('iphone');
    						//base64 在外定义为全局变量
    						//下面base64为得到旋转后的base64图片
    						base64 = canvas.toDataURL("image/jpeg", 0.8);
    						var type = 'jpeg';
    						var fixtype = function(type) {
    							type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
    							var r = type.match(/png|jpeg|bmp|gif/)[0];
    							return 'image/' + r;
    						};
    						base64 = base64.replace(fixtype(type), 'image/jpeg');
    						base64List.push(base64)
    						//这里是把已经旋转过的图片路径赋值到src中
    						$list.append('<li  class="file-item"><img src="' + base64 + '" alt=""><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
    					} else if(u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) { // android可以直接不变
    						$list.append('<li  class="file-item"><img src="' + e.target.result + '" alt=""><span class="file-del">删除</span></li>').children(':last').hide().fadeIn(2500);
    						base64List.push(e.target.result)
    						//如果安卓收到ios拍摄的照片，可以按PC端方式判断
    					} else {
    						//修复PC端上上传ios拍出来的图片
    						base64 = canvas.toDataURL("image/jpeg", 0.8);
    						var type = 'jpeg';
    						var fixtype = function(type) {
    							type = type.toLocaleLowerCase().replace(/jpg/i, 'jpeg');
    							var r = type.match(/png|jpeg|bmp|gif/)[0];
    							return 'image/' + r;
    						};
    						base64 = base64.replace(fixtype(type), 'image/jpeg');
    						base64List.push(base64)
    					}
    				};
    			};
    			oReader.readAsDataURL(file);
    		}
    	}
    	// 上传
    	$button.on('click', function() {
    		var formData = new FormData();
    		for(var i = 0, len = base64List.length; i < len; i++) {
    			let renameReportFile = new window.File([convertBase64Url(base64List[i])], i + ".jpg", {
    				type: "image/jpg"
    			})
    			formData.append('files', renameReportFile);
    		}
    		$.ajax({
    			url: upImageUrl,
    			type: 'POST',
    			data: formData,
    			dataType: 'json',
    			processData: false,
    			contentType: false,
    			success: function(data) {},
    			error: function() {}
    		});
    	})
    
        //此函数是为了转化base64的值，用于传给后台 base64  转blob
    	function convertBase64Url(data) {
    		//console.log(data)
    		//获取canvas中的图片信息
    		//window.atob方法将其中的base64格式的图片转换成二进制字符串；若将转换后的值直接赋值给Blob会报错，需Uint8Array转换：最后创建Blob对象；
    		var _data = window.atob(data.split(",")[1]);
    		//如果不用ArrayBuffer,发送给服务器的图片格式是[object Uint8Array],上传失败...
    		var buffer = new ArrayBuffer(_data.length);
    		var _buffer = new Uint8Array(buffer);
    		for(var i = 0; i < _data.length; i++) {
    			_buffer[i] = _data.charCodeAt(i);
    		}
    		var blob;
    		var Builder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;;
    		if(Builder) {
    			var builder = new Builder();
    			builder.append(_buffer);
    			blob = builder.getBlob('image/jpeg');
    		} else {
    			blob = new window.Blob([_buffer], {
    				type: 'image/jpeg'
    			});
    		}
    		return blob;
    	}

[https_www.jianshu.com_p_c919be8d8ec1_from_singlemessage]: /images/20221119/0cdc958ccfaa4b3dbc3ef493f1cb0661.png