关于手机端h5上传图片配合exif.min.js,processImg.js的使用
首先这里有个new FileReader()的概念,这是h5新增的,用来把文件读入内存,并且读取文件中的数据。FileReader接口提供了一个异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据,他有个readAsDataURL的方法,可以读取url,同时input file的change事件里面有个this.file是个数组,反应的当前上传文件的具体参数
打印出来有这些,可以判断当前上传文件类型和大小,通过readAsDataURL(this.files[0]),就可以读取当前文件,然后再Filerender的实例的onload方法里面获取当前结果
地址这就是原理,那么exif有什么用呢? 因为ios在拍照上传照片时候,会旋转90度自动修正,而exif就是保存图片元数据的作用
代码如下
EXIF.getData(p, function() {
orientation = parseInt(EXIF.getTag(p, "Orientation"));
orientation = orientation ? orientation : 1;
});
关于手机端h5上传图片配合exif.min.js,processImg.js的使用的更多相关文章
- 移动手机端H5无缝间歇平滑向上滚动js代码
在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...
- 【极品代码】一般人我不告诉他,手机端h5播放时不自动全屏代码
已测适用于ios,某些安卓手机微信下播放视频会出现播放器控件(这个实在是无力吐槽噢,因为之前还遇到过微信播放完视频后竟然无法退出全屏出现广告的情况,只有播放完后刷新页面并且要放到框架页里才能屏蔽微信视 ...
- vue+node开发手机端h5页面开发遇到的坑
项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17p ...
- 记录手机端h5页面碰到的一些问题
关于input光标在手机端偏移 问题根本:不要使用line-height垂直居中. 解决方法:可直接定义height,然后高度由上下padding值撑开. 移动端清除input光标 ios input ...
- 手机端h5页面 图片根据手势放大缩小
pinchzoom.js 这个插件可以简单的实现这一功能 <div class="big_pos_img page"> <div class="pinc ...
- 专注手机端前端界面开发的ui组件和js组合
frozenui一款腾讯开发的简化版Bootstrap,只用于手机端 http://frozenui.github.io/ https://github.com/frozenui/frozenui z ...
- iPhone X 适配手机端 H5 页面通用解决方案
一:本文提供两种解决方案 1.终端解决方案(最优,建议选择) 2.web解决方案 导语: iPhone X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了 ...
- wap手机端实现上传图片流程
实现图片上传使用了WeUI uploader插件 WeUI:是一套同微信原生视觉体验一致的基础样式库,为微信Web开发量身设计 流程:图片上传用到了FileReader,FormData,用这两个基本 ...
- 手机端H5点击类目自动定位到相应内容
_obj = {}; /*点击弹出分类*/_obj.openZZ=function(){ document.getElementById("app_screen01").style ...
随机推荐
- 多线程之ThreadLocal
Java并发编程:深入剖析ThreadLocal 想必很多朋友对ThreadLocal并不陌生,今天我们就来一起探讨下ThreadLocal的使用方法和实现原理.首先,本文先谈一下对ThreadLoc ...
- USB耳机声卡-音频输入/输出控制器:DP108替代兼容CM108
DP108是一款完全替代CM108的高度集成的单芯片USB音频解决方案芯片.方便的USB即插即用的兼容性,用户可以快速创建易用性,高质量和便携式USB音频产品基于高度集成的单芯片解决方案.所有重要的模 ...
- HDU 3591 (完全背包+二进制优化的多重背包)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3591 The trouble of Xiaoqian Time Limit: 2000/1000 M ...
- C++重载运算符练习--对people类重载“= =”运算符和“=”运算符
题目描述 对people类重载“= =”运算符和“=”运算符,“==”运算符判断两个people类对象的id属性是否相等:“=”运算符实现people类对象的赋值操作. 代码如下 #include&l ...
- linux文件属性介绍
Linux系统有如表所示的几种文件类型. 使用ls -lih 命令就可以看到各个文件的具体信息,下面选取以上所提到的这几种文件,列出他们的信息. 除了设备文件(包括字符设备文件和块设备文件二种)外,每 ...
- ACM1001:Sum Problem
Problem Description In this problem, your task is to calculate SUM(n) = 1 + 2 + 3 + ... + n. Input ...
- 【转】如何内网搭建NuGet服务器
原文:http://www.cnblogs.com/zhangweizhong/p/7755332.html NuGet 是.NET程序员熟知的工具,它可以直接安装开源社区中的各个公用组件,可以说是非 ...
- 20155202 2016-2017-2 《Java程序设计》第9周学习总结
20155202 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 整合数据库: JDBC驱动程序,按照方式分4种类型: Type1 : JDBC-ODBC B ...
- mfc 类的析构函数
析构函数 自定义析构函数 一.析构函数 析构函数(destructor) 与构造函数相反,当对象生命周期结束时(例如对象所在的函数已调用完毕),系统自动执行析构函数.析构函数往往用来做“清理善 ...
- SpringMVC初写(三)Controller的生命周期
Spring框架默认创建的对象的方式是单例,所以业务控制器Controller也是一个单例对象 由此可证明,无论是同一次请求还是同一次会话和不同请求它的对象都是相同的 然而由于对象是单例的,随之而来的 ...