H5上传压缩图片
看这个,比较全的 https://github.com/mhbseal/html5ImgCompress ,几乎所有痛点都解决了!
PC上传图片
基本结构
- form[enctype="multipart/form-data"]
- input[type="file"]
- 上传完毕后,获取图片url,显示到页面上
问题
- 图片要上传完毕后,才能显示
- 压缩上传
H5 如何解决
- FileReader
- canvas
FileReader
FileReader可以将File对象转化成base64,这样可以优先展示图片,然后处理上传操作。
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(e) {
$('img').attr('src', e.target.result);
};
FormData
实际的上传操作,大多是ajax处理的,FormData可以用来构建form表单。
var fd = new FormData();
fd.append('filename', file);
$.ajax({
url: 'xxxx/yyyy',
data: fd,
type: 'POST',
cache: false,//上传文件无需缓存
processData: false,//对于Data参数进行序列化处理
contentType: false,//必填
dataType: 'json',
success: function(data) {
},
error: function() {
}
});
canvas
手机的流量是宝贵的,但是上传个一张照片可能有几M,所有需要对图片进行压缩处理,canvas对图片的操作是通过base64格式处理的。
var img = new Image();
img.src = base64;
img.onload = function(){
var canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
canvas.getContext("2d").drawImage(img, 0, 0);
var compressBase64 = cvs.toDataURL(mime_type, quality / 100);
}
上传base64
使用mqq接口拍照或者获取本地图片时,反馈都是base64格式,input在处理过程中,经过压缩等操作也可能将File对象转化成base64,对base64的上传支持有以下方案:
- server支持,单独开接口处理base64上传
- 前端将base64转化成File对象,复用原来的server接口
这里重点讨论第2中方案。JS提供了Blob对象,是一个类文件对象,File对象继承了Blob对象,并且做了一些扩展。
基于此,只需要把base64转化成Blob对象即可。Blob的构造参考这里,可以使用类型数据来处理。
// 解码base64
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
// 类型数组
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {
type: mimeString
});
H5上传压缩图片的更多相关文章
- javascript异步上传压缩图片并立即显示图片
javascript异步上传压缩图片并立即显示图片<pre><!doctype html><html><head><meta charset=&q ...
- js上传压缩图片
原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...
- 上传base64图片并压缩
elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => thi ...
- vue移动端图片上传压缩
上传压缩方法 import {api} from '../../api/api.js'; import axios from 'axios'; export function imgPreview ( ...
- 如何预览将要上传的图片-使用H5的FileAPI
这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...
- Iphone H5上传照片被旋转
最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...
- php 上传缩放图片
有时上传图片时因为图片太大了,不仅占用空间,消耗流量,而且影响浏(图片的尺寸大小不一).下面分享一种等比例不失真缩放图片的方法,这样,不管上传的图片尺有多大,都会自动压缩到我们设置尺寸值的范围之内.经 ...
- PHP之ThinkPHP框架(验证码、文件上传、图片处理)
验证码 验证码是框架自带有的,比之前使用GD库简单方便许多,其实现原理基本相似,都是生成图片,保存验证码值到Session中,表单提交验证码,然后进行值的对比验证. 简单的显示: <form ...
- 用H5上传文件
//1,第一步读取用户选中的文件 <input type="file" accept="image/*" onchange = "selecte ...
随机推荐
- ubuntu-12.04.5-desktop-amd64.iso:ubuntu-12.04.5-desktop-amd64:安装Oracle11gR2
ubuntu 桌面版的安装不介绍. 如何安装oracle:核心步骤和关键点. ln -sf /bin/bash /bin/sh ln -sf /usr/bin/basename /bin/basena ...
- win7笔记本电脑怎么做wifi热点
win7设置wifi热点后非常方便,可以给其他笔记本和手机之类支持无线上网的移动设备使用,接下来请看超简单的详细设置方法. 方法/步骤 1 第一步先打开“控制面板” 2 点击“网络和Internet” ...
- golang包管理
https://studygolang.com/articles/8413 https://studygolang.com/articles/10523
- 关于直播学习笔记-002-Red5 & Sewise Player & Wirecast
一.工具软件 [1]. 视频采集端 Red5 Demo:http://192.168.31.107:5080/demos/simpleBroadcaster.html Telestream:Wirec ...
- python2.0_s12_day15_django框架的基本使用
day15本节内容介绍 上节作业讲解(让行进入编辑模式,批量编辑) CSS之特殊内容补充 CSS内容补充之伪类 伪类实例:返回顶部终极版 CSS内容补充之无法被覆盖 jQuery插件 jQuery插件 ...
- Ehcache整合spring
下面介绍一下简单使用的配置过程:ehcache.jar及spring相关jar就不说了,加到项目中就是了. 简单的使用真的很简单.但只能做为入门级了. 1.ehcache.xml,可放classpat ...
- unity动态加载(翻译) .
AssetBundles are files which you can export from Unity to contain assets of your choice. These files ...
- 如何在单片机上使用printf函数(printf)(avr)(stm)(lpc)(单片机)(转)
摘要: 当我们在调试代码时,通常需要将程序中的某个变量打印至PC机上,来判断我们的程序是否按预期的运行,printf函数很好的做到了这一点,它能直接以字符的方式输出变量名和变量的值,printf ...
- linux 个性化设置shell提示
1.linux 用户登录过程中 相关文件执行顺序: /etc/profile → /etc/profile.d/*.sh → ~/.bash_profile → ~/.bashrc → [/etc/b ...
- MQTT-SN协议乱翻之实现要点
前言 本篇是MQTT-SN 1.2协议最后一篇翻译了,主要涉及实现要点,很简短. 需要支持QoS 值为 -1 QoS虽默认设置有0,1,2三个值,但还有一种情况其值为-1.来自客户端的PUBLISH消 ...