项目分享五:H5图片压缩与上传
一、简介
图片的压缩与上传,是APP里一个很常用的功能。我们来年看 ChiTuStore 是怎样做的。相关文件 App/Module/User/UserInfo.html,App/Module/User/UserInfo.ts
二、HTML布局
HTML 文件中,有如下二句,第一句就是上图所看到的图片,其中的 class 表示该图片以圆形来显示,并且靠右。第二句是一个 Input 控件,其类型为 file ,是用来上传文件的。值得注意的是 style,这的作用是让该控件与图片重叠,并且透明(opacity:0),accept="image/*" 的作用是只上传图片。
<img data-bind="attr:{src:userInfo.HeadImageUrl}" class="img-circle pull-right" style="width:70px;height:70px;">
<input type="file" style="position:absolute;top:0px;left:0px;opacity:0;width:100%;height:90px;" accept="image/*">
三、图片的压缩
传统 WEB 的做法,都是把图片直接上传到服务端,然后在服务端进行压缩。但现在,在H5 中,是可以对图片进行压缩再上传的。我们来看一下 JS 代码,其中的 ImageFileResize 就是用来处理图片的压缩的。
page.viewChanged.add(() => {
var e = page.nodes().content.querySelector('[type="file"]');
var imageFileResize = new ImageFileResize(<HTMLInputElement>e, { maxWidth: 100, maxHeight: 100 });
imageFileResize.imageResized = (urls: string[], thumbs1: string[], thumbs2: string[]) => {
model.userInfo.HeadImageUrl(thumbs1[0]);
member.setUserInfo(mapping.toJS(model.userInfo));
}
ko.applyBindings(model, page.node());
})
我们现在来看一下 ImageFileResize 中的关键代码,这段代码的作用是用来把 <input type="file"/> 选取的文件,进行压缩的。其中有几个关键的对象、函数,是 H5 中的 API,FileReader,createObjectURL,Image。
这几个对象、函数的具体用法,在这里就不展开说了,网上搜一下就可以找到答案了。
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = (ev: Event) => {
var blob = new Blob([event.target['result']]);
window['URL'] = window['URL'] || window['webkitURL'];
var blobURL = window['URL'].createObjectURL(blob); // and get it's URL
var image = new Image();
image.src = blobURL;
image.onload = () => {
var url = this.resizeMe(image, max_width, max_height);
var thumb = this.resizeMe(image, this.thumb2.maxWidth, this.thumb2.maxHeight);
result.resolve({ index: index, url: url, data: url, thumb: thumb });
}
}
下面我们再来看一下 resizeMe 函数,这个函数的把的图片(HTMLImageElement),转换为了 base64 的字符串,其中一个重要的对象就是 canvas,它也是 H5 中的对象。通过它可以把图片转换为 base64 字符串。
private resizeMe(img: HTMLImageElement, max_width: number, max_height: number) { var canvas = document.createElement('canvas'); var width: number = img.width;
var height: number = img.height; // calculate the width and height, constraining the proportions
if (width > height) {
if (width > max_width) {
height = Math.round(height *= max_width / width);
width = max_width;
}
} else {
if (height > max_height) {
width = Math.round(width *= max_height / height);
height = max_height;
}
} canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); return canvas.toDataURL("image/jpeg", 0.7); }
四、服务端的保存
服务的保存有两种方法
1、把 base64 字符串转换为二进制流,然后再保存为图片文件。
2、直接把 base64 保存数据库。在这个项目,是把它保存到 MongoDB 数据库。
五、浏览器的坑
即然是通过浏览器进行压缩上传,那么就无法避免会有坑。
1、在 QQ 浏览器中,不起作用。据说是不支持 canvas 。
2、在 APP 的混合开发中,在锤子 T2 的手机也不起作用。
六、小结
尽管在本地压缩、预览图片有着很好的用户体验,但是兼容性差,如果是 APP 的开发,还是调用原生的接口吧。如果浏览器的 WEB APP 项目,还是得考虑兼容性。不支持 canvas 的浏览器,使用传统的方法来上传图片。
代码已经开源在 github,感兴趣的朋友可以自行下载。https://github.com/ansiboy/ChiTuStore
项目分享五:H5图片压缩与上传的更多相关文章
- H5图片压缩与上传
接到需求,问前端是否可以压缩图片?因为有的图片太大,传到服务器上再压缩太慢了.意识里没有这么玩过,早上老大丢来一个知乎链接,一看,原来前辈们已经用canvas实现了(为自己的见识羞愧3秒钟,再马上开干 ...
- 使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器
使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进 ...
- (转)Android学习-使用Async-Http实现图片压缩并上传功能
(转)Android学习-使用Async-Http实现图片压缩并上传功能 文章转载自:作者:RyaneLee链接:http://www.jianshu.com/p/940fc7ba39e1 让我头疼一 ...
- 移动端h5拍照压缩即时上传后台并预览
项目经理让迭代一个功能,实时预览并上传到后台的功能,听到这立马想起了几个第三方插件去实现,mui 和api cloude万万没想到的是这个app前面使用ios 和安卓原生写的,然后mui和api c ...
- Android的图片压缩并上传
Android开发中上传图片很常见,一般为了节省流量会进行压缩的操作,本篇记录一下压缩和上传的方法. 图片压缩的方法 : import java.io.ByteArrayOutputStream; i ...
- vue开发中vue-resource + canvas 图片压缩、上传、预览
1.使用vue-resource上传,也可以自定义ajax上传: 2.使用<input type="file" @change="submit()" na ...
- 在 .NET Core项目中使用UEditor图片、文件上传服务
在.NET Framework中使用UEditor时,只需要将UEditor提供的后端服务,部署为一个子程序,即可直接使用文件上传相关的服务,但是UEditor官方并未提供.Net Core的项目,并 ...
- js图片压缩+ajax上传
图片压缩用到了localresizeimg 地址: https://github.com/think2011/localResizeIMG 用起来比较简单 <input type="f ...
- H5图片预览、压缩、上传
目标实现: 1.选择图片, 前端预览效果 2.图片大于1.2M的时候, 对图片进行压缩 3.以表单的形式上传图片 4.图片删除 预览效果图: 代码说明: 1.input:file选择图片 <!- ...
随机推荐
- 简单的 http 服务器
HttpUtils: package org.windwant.httpserver; import java.io.IOException; import java.net.InetSocketAd ...
- 【密码】Oracle用户密码系列
[密码]Oracle用户密码系列 1.1 BLOG文档结构图 1.2 前言部分 1.2.1 导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识, ...
- MYSQL 数据库导入导出命令
MySQL命令行导出数据库 1,进入MySQL目录下的bin文件夹:cd MySQL中到bin文件夹的目录 如我输入的命令行:cd C:\Program Files\MySQL\MySQL Serve ...
- FFMPEG ./configure 参数及意义
FFMPEG版本:2.6.2,编译环境:ubuntu 14.4. 不同版本的FFMPEG参数可能不同,可在FFMPEG目录下使用以下命令查看 ./configure --help --help pri ...
- eclipse 启动报错\workspace\.metadata\.log
eclipse启动报错,让查看.metadata\.log日志 eclipse启动不了,让查看.metadata\.log日志,上面为日志中的错误提示. 解决办法:删除 .metadata\.plug ...
- Java 集合系列13之 WeakHashMap详细介绍(源码解析)和使用示例
概要 这一章,我们对WeakHashMap进行学习.我们先对WeakHashMap有个整体认识,然后再学习它的源码,最后再通过实例来学会使用WeakHashMap.第1部分 WeakHashMap介绍 ...
- AStar算法的学习
摘自:http://www.cnblogs.com/hxsyl/p/3994730.html A*算法的java实现 import java.util.ArrayList; import java.u ...
- CoCreateInstance调用COM接口伪流程
在编写组件程序时,经常会使用CoCreateInstance直接取COM组件的接口,非常方便,那CoCreateInstance到底干了些什么事呢?1.CoCreateInstance取COM组件的接 ...
- Java 对象和类
1.对象 object 对象是可被感知的一个实体,有唯一的名称.有一组表现对象的状态属性和对象内在具有的行为能力.比如张三这个人,他有姓名.职业.眼睛等具体状态属性,能实施说.跑.吃等方法.对象,在j ...
- 【2016-10-15】【坚持学习】【Day6】【组合模式】
哈哈,今天偷懒了,在晚上只看了一个组合模式. 例子: 树结构,有一些是树节点,一些是叶子节点. 比如,文件夹树结构,一个是文件夹节点,一个是文件节点,虽然都是树的节点,但是具体的业务肯定是区别的. 代 ...