[javascript]——移动端 HTML5 图片上传预览和压缩
在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩。
在代码之前,有必要先了解我们即将使用到的几个API
file 和 FileList 对象
file对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个 input 元素上选择文件后返回的FileList对象,也可以是来自由拖放操作生成的 DataTransfer对象。
通常情况我们这样使用它:
<input id="test" type="file" multiple/>
// FileList 对象
var fs = document.getElementById("text").files
console.log(fs)
>>FileList
0:File
lastModified:1487309111498
lastModifiedDate:Fri Feb 17 2017 13:25:11 GMT+0800 (中国标准时间)
name:"1.png"
size:22177
type:"image/png"
webkitRelativePath:""
FileReader
FileReader,web应用程序使用它可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容。
1、具体使用之前,我们应先创建一个FileReader 对象
var reader = new FileReader()
2、然后读取一个文件,共有四种方式,这里只介绍我们最常使用的一个:
reader.readAsDataURL(fs); // var fs = document.getElementById("text").files
3、在 onload 事件中触发回调
reader.onload = function (e) {
console.log(e)
console.log(this)
}
// this.result 是一个base64 格式的图片地址
HTMLCanvasElement.toDataURL()
HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。图片的分辨率为96dpi。
- 如果画布的高度或宽度是0,那么会返回字符串“
data:,”。
- 如果传入的类型非“
image/png
”,但是返回的值以“data:image/png
”开头,那么该传入的类型是不支持的。 - Chrome支持“
image/webp
”类型。
语法
canvas.toDataURL(type, encoderOptions);
参数
type
可选
图片格式,默认为 image/png
encoderOptions
可选
在指定图片格式为 image/jpeg 或
image/webp的情况下,可以从 0 到 1 的区间内选择图片的质量
。如果超出取值范围, 将会使用默认值 0.92
。其他参数会被忽略。
压缩
/**
* @param {Object} f input选择的图片 必填
* @param {String} quality 图片压缩的质量[0, 1]
* @param {String} output_img_type 输出图片的类型
*/
compress: function (f, quality, output_img_type) {
var mime_type = "image/jpeg";
if(output_img_type!=undefined && output_img_type=="image/png"){
mime_type = "image/png";
}
createImageBitmap(f).then(function(imageBitmap) {
var max = 1000; // 设置最大分辨率
var c_w = '';
var c_h = '';
var width = imageBitmap.width;
var height = imageBitmap.height;
// 等比例缩放
if (width > max || height > max) {
if (width > height) {
c_w = max;
c_h = max * height / width;
} else {
c_h = max;
c_w = max * width / height;
}
}else { // 不缩放
c_w = width;
c_h = height;
}
var canvas = document.createElement('canvas');
canvas.width = c_w;
canvas.height = c_h;
var ctx = canvas.getContext('2d');
ctx.drawImage(imageBitmap,0,0, width, height, 0, 0, c_w, c_h);
canvas.toBlob(function(blob){
images.push(blob);
},mime_type, quality);
});
}
实例
下面我们就来实现图片预览和压缩功能
HTML结构如下:
<div class="upload">
<p>上传图片</p>
<form>
<input multiple id="upload_input" type="file" />
</form>
<h4>原图预览</h4>
<img src="" id="test">
<h4>压缩后预览</h4>
<img src="" id="test2" style="max-width: 200px;">
<button type="submit">点击提交</button>
</div>
JS 代码如下:
window.onload = function () {
var Upload = {
change: function () {
var oform = document.querySelector('form'),
_this = this,
res = //,
oFiles = document.getElementById('upload_input').files;
console.log(oFiles)
for(var key in oFiles) {
if(oFiles.hasOwnProperty(key)) {
var f = oFiles[key];
var type = f.type;
if(type !== 'image/png' && type !== 'image/jpg' &&type !== 'image/jpeg' ) {
alert("图片的格式必须为png或者jpg或者jpeg格式!");
return;
}
var reader = new FileReader();
reader.readAsDataURL(f);
reader.onload = function (e) {
console.log(e)
console.log(this)
var img = document.getElementById('test');
var img2 = document.getElementById('test2');
img.src = this.result;
var quality = .8;
var compressImg = Upload.compress(img,quality);
img2.src = compressImg
}
}
}
},
change2: function() {
var file_arr = file.files;
var ul = $(".weui_uploader_files");
if(file_arr.length < 7) {
for(var key in file_arr) {
if(file_arr.hasOwnProperty(key)) {
var f = file_arr[key];
var url = URL.createObjectURL(f);
var reader = new FileReader();
reader.readAsDataURL(f);
n +=1;
if(n < 7) {
reader._onload = function(e) {
// 拼接显示预览图片的html
var list = $("<li class='weui_uploader_file' style='position: relative'>" +
"<img id='preview" + n + "' class=preview_li' style='width: 100%;height: 100%'>" +
"<span id='delImg" + n+ "' style='position: absolute; top: 0; right: 4px; color: #e4007f'>X</span></li>");
ul.append(list);
// 将转化后的图片地址放在img中
var pic = document.getElementById('preview' + n);
//pic.src = this.result;
pic.src=url;
console.log(reader);
images.push(f);
document.getElementById('delImg' + n).addEventListener("click", function () {
$(this).parent().remove();
});
return {
images:images
};
};
reader._onload();
}else {
$.alert("最多上传6张图片");
}
}
}
}else {
$.alert("最多上传6张图片");
}
},
compress: function (source_img, quality, output_img_type) {
var mime_type = "image/jpeg";
if(output_img_type!=undefined && output_img_type=="image/png"){
mime_type = "image/png";
}
var max = 1000; // 设置最大分辨率
var c_w = '';
var c_h = '';
var width = source_img.width;
var height = source_img.height;
// 等比例缩放
if (width > max || height > max) {
if (width > height) {
c_w = max;
c_h = max * height / width;
} else {
c_h = max;
c_w = max * width / height;
}
}else { // 不缩放
c_w = width;
c_h = height;
}
var canvas = document.createElement('canvas');
canvas.width = c_w;
canvas.height = c_h;
var ctx = canvas.getContext('2d');
ctx.drawImage(source_img,0,0, width, height, 0, 0, c_w, c_h);
var outputUrl = canvas.toDataURL(mime_type, quality);
return outputUrl;
},
submit: function () {
}
};
document.getElementById('upload_input').addEventListener('change',Upload.change);
}
DEMO效果预览:
[javascript]——移动端 HTML5 图片上传预览和压缩的更多相关文章
- HTML5 图片上传预览
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...
- HTML5图片上传预览
HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...
- html5 图片上传 预览
<html><body><fieldset> <legend>测试</legend> <div class="form-gr ...
- 用html5文件api实现移动端图片上传&预览效果
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象 Blob表示原始二进制数据,Html5的file对象就继 ...
- 移动端 js 实现图片上传 预览
方法一: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q ...
- js前端实现多图图片上传预览
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="C ...
- Javascript之图片上传预览
使用Javascript之图片上传预览,我们无需上传到服务器中,兼容所有浏览器. 关键方法是使用微软库filter:progid:DXImageTransform.Microsoft.AlphaIma ...
- 模拟QQ心情图片上传预览
出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...
- 兼容好的JS图片上传预览代码
转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...
随机推荐
- Redis 键空间通知
[Redis 键空间通知] 键空间通知使得客户端可以通过订阅频道或模式, 来接收那些以某种方式改动了 Redis 数据集的事件. 以下是一些键空间通知发送的事件的例子: 所有修改键的命令. 所有接收到 ...
- Oracle 注意点大全
1.索引 经常查询的字段.主表与从表关联主键id必须建立索引.
- scala 排序
sortBy() 定义: def sortBy[B](fun: (A) =>B) 栗子1: val words = "the quick brown fox jumped over t ...
- null与not null
.not null CREATE TABLE `test` ( `col1` VARCHAR( ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NUL ...
- vargant
http://blog.csdn.net/openn/article/details/54927375
- yum 系列(一) yum 和 rpm 常用命令
yum 系列(一) yum 和 rpm 常用命令 一.yum 常用命令 yum 命令:http://man.linuxde.net/yum yum 是在 Fedora 和 RedHat 以及 SUSE ...
- 修改RocketMQ的NameServer端口
---问题--- 有同事提出各个问题:如何修改RocketMQ的NameServer端口号?(默认:9876) ---结论--- 调查并验证之后,结论及过程如下: 验证版本:rocketmq-all- ...
- hadoop 分布式集群安装
这一套环境搭完,你有可能碰到无数个意想不到的情况. 用了1周的时间,解决各种linux菜鸟级的问题,终于搭建好了.. 沿途的风景,甚是历练. 环境介绍: 系统:win7 内存:16G(最低4G,不然跑 ...
- docker-compose示例与命令介绍
一.docker-compose.yml示例 version: ‘2‘ #指定compose版本 services: log: #服务名称 image: vmware/harbor-log #指定镜像 ...
- 在VMware中设置CentOS7的网络
为了能够使用XShell来管理我们安装好的CentOS7系统,所以我们要先设置CentOS7的网络使其能够联网. 1.选择vmware的编辑,然后点击虚拟网络编辑器 2.点击更改设置(需要有 ...