在开发 H5 应用的时候碰到一个问题,
应用只需要一张小的缩略图,
而用户用手机上传的确是一张大图,
手机摄像机拍的图片好几 M,这可要浪费很多流量。

像我这么为用户着想的程序员,绝对不会让这种事情发生的,
于是就有了本文。

获取图片

通过 File API 获取图片。

var input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', function() {
var file = this.files[0];
});
input.click();

预览图片

使用 createObjectURL() 或者 FileReader 预览图片

var img = document.createElement('img');
img.src = window.URL.createObjectURL(file);
var img = document.createElement("img");
var reader = new FileReader();
reader.onload = function(e) {
img.src = e.target.result;
}
reader.readAsDataURL(file);

使用 canvas 做缩略图

var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height; if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);

上传缩略图

canvas.toBlob(function(blob) {
var form = new FormData();
form.append('file', blob);
fetch('/api/upload', {method: 'POST', body: form});
});

html5之上的图片处理的更多相关文章

  1. 基于html5的多图片上传,预览

    基于html5的多图片上传 本文是建立在张鑫旭大神的多文图片传的基础之上. 首先先放出来大神多图片上传的博客地址:http://www.zhangxinxu.com/wordpress/2011/09 ...

  2. HTML5移动端图片左右切换动画

    插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...

  3. 使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)

    使用html5 FileReader获取图片,并异步上传到服务器(不使用iframe)   原理: 1.使用FileReader 读取图片的base64编码 2.使用ajax,把图片的base64编码 ...

  4. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  5. LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android

    LocalResizeIMG前端HTML5本地压缩图片上传,兼容移动设备IOS,android jincon 发表于 2015-02-26 18:31:01 发表在: php开发 localresiz ...

  6. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  7. CSS 与 HTML5 响应式图片

    什么是响应式图片? 响应式图片是指:用户代理根据输出设备的分辨率不同加载不同类型的图片,不会造成带宽的浪费.同时,在改变输出设备类型或分辨率时,能及时加载对应类型的图片. CSS3 响应式图片 对于很 ...

  8. CSS与HTML5响应式图片

    随着 Retina 屏幕的逐渐普及,网页中对图片的适配要求也越来越高.如何让图片在放大了两倍的 Retina 屏幕显示依然清晰,曾经一度困扰着网页开发者,好在 CSS3 与 HTML5 已经着力在改变 ...

  9. HTML5 JavaScript实现图片文字识别与提取

    8月底的时候,@阿里巴巴 推出了一款名为“拯救斯诺克”的闯关游戏,作为前端校园招聘的热身,做的相当不错,让我非常喜欢.后来又传出了一条消息,阿里推出了A-star(阿里星)计划,入职阿里的技术培训生, ...

随机推荐

  1. Junit3与Junit4的区别

    Junit4最大的亮点就是引入了注解(annotation),通过解析注解就可以为测试提供相应的信息,抛弃junit3使用命名约束以及反射机制的方法. /** * 被测试类 */ package co ...

  2. 编解码-java序列化

    大多数Java程序员接触到的第一种序列化或者编解码技术就是Java的默认序列化,只需要序列化的POJO对象实现java.io.Serializable接口,根据实际情况生成序列ID,这个类就能够通过j ...

  3. CSV文件格式分析器执行:从字符串Split至FSM

    本文乃Siliphen原创,转载请注明出处:http://blog.csdn.net/stevenkylelee/article/details/38309147 本文分为5小节,基本上就是我刚接触C ...

  4. mysql-innoDB-锁

    在InnoDB加锁前,为什么要先start transaction innodb下锁的释放在事务提交/回滚之后,事务一旦提交/回滚之后,就会自动释放事务中的锁,innodb默认情况下autocommi ...

  5. 1、c++对c语言的扩展

    1.类型增强 检查更加严格 比如,把一个 const 类型的指针赋给非 const 类型的指针.c 语言中可以通的过,但是在 c++中则编不过去 ; int b = a; const int *pa ...

  6. Iptables防火墙(SNAT和DNAT)

     1.SNAT:源地址转换 实现内网访问外网,修改IP地址,使用POSTROUTING 命令:iptables  -t  nat  -A POSTROUTING  -s  192.168.1.10/2 ...

  7. 构建squid代理服务器

    基本概念 本文使用squid代理服务 软件介绍:百度百科 作为应用层的代理服务软件,Squid主要提供缓存加速.应用层过滤控制的功能: 工作机制:缓存网页对象,减少重复请求(HTTP代理的缓存加速对象 ...

  8. linux上搭建nginx

    安装包:(按顺序执行过去即可,重复无所谓)c++编译环境 yum install gcc-c++ 安装pcre yum -y install pcre-devel 安装openssl yum -y i ...

  9. Windows核心编程:第12章 纤程

    Github https://github.com/gongluck/Windows-Core-Program.git //第12章 纤程.cpp: 定义应用程序的入口点. // #include & ...

  10. 怎么点击div之外的区域就隐藏这个div啊 找了很久,都没有很好解决

    方法一. <!DOCTYPE html><html><head><meta http-equiv="Content-Type" conte ...