移动端H5图片上传的那些坑
上周做一个关于移动端图片压缩上传的功能。期间踩了几个坑,在此总结下。
大体的思路是,部分API的兼容性请参照caniuse:
- 利用FileReader,读取
blob对象
,或者是file对象
,将图片转化为data uri
的形式。 - 使用
canvas
,在页面上新建一个画布,利用canvas
提供的API,将图片画入这个画布当中。 - 利用
canvas.toDataURL()
,进行图片的压缩,得到图片的data uri
的值 - 上传文件。
步骤1当中,在进行图片压缩前,还是对图片大小做了判断的,如果图片大小大于200KB时,是直接进行图片上传,不进行图片的压缩,如果图片的大小是大于200KB,则是先进行图片的压缩再上传:
<input type="file" id="choose" accept="image/*">
var fileChooser = document.getElementById("choose"),maxSize = 200 * 1024; //200KBfileChoose.change = function() {var file = this.files[0], //读取文件reader = new FileReader();reader.onload = function() {var result = this.result, //result为data url的形式img = new Image(),img.src = result;if(result.length < maxSize) { imgUpload(result); //图片直接上传} else {var data = compress(img); //图片首先进行压缩imgUpload(data); //图片上传}}reader.readAsDataURL(file);}
步骤2,3:
var canvas = document.createElement('canvas'),ctx = canvas.getContext('2d');function compress(img) {canvas.width = img.width;canvas.height = img.height;//利用canvas进行绘图//将原来图片的质量压缩到原先的0.2倍。var data = canvas.toDataURL('image/jpeg', 0.2); //data url的形式return data;}
在利用canvas进行绘图的过程中,IOS图片上传过程中,存在着这样的问题:
- 当你竖着拿手机的时候,拍完照,上传图片时,会出现照片自动旋转的情况,而横着拍照并上传图片时不会出现这个问题。这个时候如果想纠正图片自动旋转的情况,将图片转化为二进制的数据
(使用了binaryajax.js)
,方便获取图片的exif信息
,通过获取exif的信息
来确定图片旋转的角度(使用了exif.js)
,然后再进行图片相应的旋转处理。解决方法请戳我 - 在
IOS
中,当图片的大小大于 2MB时,会出现图片压扁的情况,这个时候需要重置图片的比例。解决方法请戳我 - 利用FileReader,读取图片的过程需要花费一定时间,将图片数据注入到canvas画布中需要一定时间,图片压缩的过程中,图片越大,CPU计算消耗的时间也越长,可能会出现顿卡的情况。总之,就是这个过程当中需要花费一定时间。
- IOS8.1的版本中有个
FileReader
的bug:FileReader
读取的图片转化为Base64时,字符串为空,具体的问题描述请戳我
步骤4,文件上传有2种方式:
- 将图片转化为base64
- 将图片数据转为Blob对象,使用FormData上传文件
方式1可以通过xhr ajax或者xhr2 FormData进行提交。
方法2这里就有个大坑了。具体描述请戳我
简单点说就是:Blob对象
是无法注入到FormData对象
当中的。
当你拿到了图片的data uri数据
后,将其转化为Blob
数据类型
var ndata = compress(img);ndata = window.atob(ndata); //将base64格式的数据进行解码//新建一个buffer对象,用以存储图片数据var buffer = new Uint8Array(ndata.length);for(var i = 0; i < text.length; i++) {buffer[i] = ndata.charCodeAt(i);}//将buffer对象转化为Blob数据类型var blob = getBlob([buffer]);var fd = new FormData(),xhr = new XMLHttpRequest();fd.append('file', blob);xhr.open('post', url);xhr.onreadystatechange = function() {//do something}xhr.send(fd);
在新建Blob对象
中有需要进行兼容性的处理,特别是对于不支持FormData
上传blob
的andriod机的兼容性处理。具体的方法请戳我
主要实现的细节是通过重写HTTP请求。
2月19日更新
在安卓机器中,部分4.x
的机型, 在webview
里面对file
对象进行了阉割,比如你拿不到file.type
的值。
2月22日更新
Android4.4
下<input type="file">
由于系统WebView
的openFileChooser
接口更改,导致无法选择文件,从而导致无法上传文件. bug描述请戳我
封装好的github库,请戳我,如果觉得文章不错,请不要吝啬你的star~~
移动端H5图片上传的那些坑相关推荐
- Android WebView 支持H5图片上传input type=file
2019独角兽企业重金招聘Python工程师标准>>> Android WebView 缓存处理 Android WebView 支持H5图片上传<input type=&qu ...
- 微信开发h5图片上传(拍照、图片压缩、IOS照片旋转)
微信开发h5图片上传 开发环境 vue.js,原生h5 input file, 微信公众号网页 依赖安装 exif-js:IOS下拍照照片的方向有问题, 需要exif-js来读取照片信息进行旋转处理: ...
- antd 图片上传遇到的坑----图片回显(Upload)
antd 图片上传遇到的坑----图片回显(Upload) 最近又被安排了一个前端的项目,遇到了一个图片上传的问题,用的是antd的Upload组件,在这遇到的问题和大家分享一下,下网可以帮到需要的人 ...
- 移动端 实现图片上传
需求 公司现在在移动端使用webuploader实现图片上传,但最近需求太奇葩了,插件无法满足我们的PM 经过商讨决定下掉这个插件,使用H5原生的API实现图片上传. 7.3日发布:单张图片上传 9. ...
- vue项目中的h5图片上传(处理上传的时候图片被旋转的问题,并压缩图片大小)
vue的图片上传 这个页面实现的主要是实现创建球队功能,里面包含队徽,球队类型,球队名称,所属地址 这里除了图片上传还有一个地址的三级联动功能,这里我把这个页面都贴上来了.这个项目中使用vux作为ui ...
- 解决uniapp在h5图片上传后旋转90度问题(editor同样适用)
问题简单描述 以往没有uniapp上传图片的经验,这两天刚接手这个功能,遇到了一系列糟心的事情 1.第一版我使用的插件市场的图片压缩插件,出现的问题:低版本安卓拍照出现闪退白屏等问题 2.第二版我换了 ...
- h5上传图片html5,h5图片上传简易版(FileReader+FormData+ajax)
一.选择图片(input的file类型) 1. input的file类型会渲染为一个按钮和一段文字.点击按钮可打开文件选择窗口:file类型的input会有files属性,保存着文件的相关信息. 2. ...
- 关于H5 图片上传(全篇)
首先在main.js引入 import { Form,Field } from 'vant'; Vue.use(Form); Vue.use(Field); vue文件 template 写入 < ...
- uni-app APP,H5图片上传添加文字水印,图片只显示左上角bug(H5,安卓App可用,其他暂未测试)
项目场景: 提示:这里简述项目相关背景: uni-app上传图片添加文字水印功能时图片只显示左上角,或者图片重叠 图片不规则一系列bug,特此记录 问题描述 提示:这里描述项目中遇到的问题: 上传图片 ...
最新文章
- 99 网络编程_网络工程师技能图谱,看看你会多少技能
- dedecms--需要注意的细节
- 1-7:学习shell之透过shell看世界
- 关于Word2016敲入公式的新方法
- manjaro设置java_manjaro 深度学习编程环境搭建
- 12、箱形图和小提琴图的绘制
- Java程序员必备的一些流程图(拿走不谢)
- win10微软图标点击无反应_Win10任务栏系统图标点击无反应的解决方法
- 华为IBMC管理口提示:当前无可操作的RAID控制器 以及 在远程控制台做raid的方法
- 计算机删除行快捷键,删除快捷键是什么?电脑删除快捷键有哪些?
- 微信缓存dat怎么转图片_PC微信dat怎么转图片?
- 如何自学编写手游脚本_自学如何编写代码时应做的5件事
- 创业者的噩梦 - 明明我先想到的
- PR放入视频音频后没声音,及提示MME设备内部错误的解决办法
- go语言中error的分类与用法
- AJAX与cooikes
- 强化学习入门 Q-learning与SARSA
- 有哪些道理是你毕业多年后才明白的?
- 有控制雷电武器的java游戏_雷电飞机射击游戏 JAVA
- 达梦数据库更新License
热门文章
- php5.2.3 zend3,windows 2008 R2 下 IIS7.5+PHP5.2.17+Mysql5.5.16+Zend3.3.3
- java 虚拟机 参数_Java虚拟机的参数
- DeepLearning:模型之间的相互转化(keras-hdf5→Tensorflow-pb文件)
- 你绝对能懂的“机器学习”(四)
- 外国人居留证申请程序
- 基于VB和EXCEL的报表设计及打印
- java rocketmq消费_rocketmq消费负载均衡--push消费详解
- 贫困地区农品产销对接行动倡议书-中国农民丰收节交易会
- jQuery自定义美化下拉框
- Spring Boot连接MySQL报错“Internal Server Error”的解决办法