看这个,比较全的 https://github.com/mhbseal/html5ImgCompress ,几乎所有痛点都解决了!

PC上传图片

基本结构
  1. form[enctype="multipart/form-data"]
  2. input[type="file"]
  3. 上传完毕后,获取图片url,显示到页面上
问题
  1. 图片要上传完毕后,才能显示
  2. 压缩上传

H5 如何解决

  1. FileReader
  2. 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的上传支持有以下方案:

  1. server支持,单独开接口处理base64上传
  2. 前端将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上传压缩图片的更多相关文章

  1. javascript异步上传压缩图片并立即显示图片

    javascript异步上传压缩图片并立即显示图片<pre><!doctype html><html><head><meta charset=&q ...

  2. js上传压缩图片

    原文链接:http://blog.csdn.net/iefreer/article/details/53039848 手机用户拍的照片通常会有2M以上,这对服务器带宽产生较大压力. 因此在某些应用下( ...

  3. 上传base64图片并压缩

    elementUI+react 布局 <Dialog title="充值" visible={ dialogVisible } onCancel={ () => thi ...

  4. vue移动端图片上传压缩

    上传压缩方法 import {api} from '../../api/api.js'; import axios from 'axios'; export function imgPreview ( ...

  5. 如何预览将要上传的图片-使用H5的FileAPI

    这篇将要说的东西已经不新鲜了. 参考资料: Reading files in JavaScript using the File APIs (鉴于作者在美国, 我姑且认为作者母语是英语, 当然链接中有 ...

  6. Iphone H5上传照片被旋转

    最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...

  7. php 上传缩放图片

    有时上传图片时因为图片太大了,不仅占用空间,消耗流量,而且影响浏(图片的尺寸大小不一).下面分享一种等比例不失真缩放图片的方法,这样,不管上传的图片尺有多大,都会自动压缩到我们设置尺寸值的范围之内.经 ...

  8. PHP之ThinkPHP框架(验证码、文件上传、图片处理)

     验证码 验证码是框架自带有的,比之前使用GD库简单方便许多,其实现原理基本相似,都是生成图片,保存验证码值到Session中,表单提交验证码,然后进行值的对比验证. 简单的显示: <form ...

  9. 用H5上传文件

    //1,第一步读取用户选中的文件 <input type="file" accept="image/*" onchange = "selecte ...

随机推荐

  1. 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 ...

  2. win7笔记本电脑怎么做wifi热点

    win7设置wifi热点后非常方便,可以给其他笔记本和手机之类支持无线上网的移动设备使用,接下来请看超简单的详细设置方法. 方法/步骤 1 第一步先打开“控制面板” 2 点击“网络和Internet” ...

  3. golang包管理

    https://studygolang.com/articles/8413 https://studygolang.com/articles/10523

  4. 关于直播学习笔记-002-Red5 & Sewise Player & Wirecast

    一.工具软件 [1]. 视频采集端 Red5 Demo:http://192.168.31.107:5080/demos/simpleBroadcaster.html Telestream:Wirec ...

  5. python2.0_s12_day15_django框架的基本使用

    day15本节内容介绍 上节作业讲解(让行进入编辑模式,批量编辑) CSS之特殊内容补充 CSS内容补充之伪类 伪类实例:返回顶部终极版 CSS内容补充之无法被覆盖 jQuery插件 jQuery插件 ...

  6. Ehcache整合spring

    下面介绍一下简单使用的配置过程:ehcache.jar及spring相关jar就不说了,加到项目中就是了. 简单的使用真的很简单.但只能做为入门级了. 1.ehcache.xml,可放classpat ...

  7. unity动态加载(翻译) .

    AssetBundles are files which you can export from Unity to contain assets of your choice. These files ...

  8. 如何在单片机上使用printf函数(printf)(avr)(stm)(lpc)(单片机)(转)

    摘要:    当我们在调试代码时,通常需要将程序中的某个变量打印至PC机上,来判断我们的程序是否按预期的运行,printf函数很好的做到了这一点,它能直接以字符的方式输出变量名和变量的值,printf ...

  9. linux 个性化设置shell提示

    1.linux 用户登录过程中 相关文件执行顺序: /etc/profile → /etc/profile.d/*.sh → ~/.bash_profile → ~/.bashrc → [/etc/b ...

  10. MQTT-SN协议乱翻之实现要点

    前言 本篇是MQTT-SN 1.2协议最后一篇翻译了,主要涉及实现要点,很简短. 需要支持QoS 值为 -1 QoS虽默认设置有0,1,2三个值,但还有一种情况其值为-1.来自客户端的PUBLISH消 ...