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

本文探讨了在iOS设备上通过FileReader处理图片上传时自动旋转的问题,介绍了如何利用EXIF和画布技术解决图片旋转,并针对不同平台提供适配。同时讲述了将处理后的图片上传到服务器的步骤,包括base64转换和后台处理。
摘要由CSDN通过智能技术生成
问题描述:
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来自这位简书作者

具体的旋转方案就是利用画布,先把图片放到画布,转换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(va
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值