-
Notifications
You must be signed in to change notification settings - Fork 34
/
Copy pathImgProcess.html
137 lines (114 loc) · 5.91 KB
/
ImgProcess.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>html5+exif.js+canvas实现手机端照片上传预览、压缩、旋转功能</title>
<style>
*{margin: 0;padding: 0;}
li{list-style-type: none;}
a,input{outline: none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
#choose{display: none;}
canvas{width: 100%;border: 1px solid #000000;}
#addImg,#submit{display: block;margin: 10px;height: 60px;text-align: center;line-height: 60px;border: 1px solid;border-radius: 5px;cursor: pointer;}
.img_list,.imgCompress_list{margin: 10px 5px;}
.img_list li,.imgCompress_list li{position: relative;display: inline-block;width: 100px;height: 100px;margin: 5px 5px 20px 5px;border: 1px solid rgb(100,149,198);background: #fff no-repeat center;background-size: cover;}
.progress{position: absolute;width: 100%;height: 20px;line-height: 20px;bottom: 0;left: 0;background-color:rgba(100,149,198,.5);}
.progress span{display: block;width: 0;height: 100%;background-color:rgb(100,149,198);text-align: center;color: #FFF;font-size: 13px;}
.size{position: absolute;width: 100%;height: 15px;line-height: 15px;bottom: -18px;text-align: center;font-size: 13px;color: #666;}
.tips{display: block;text-align:center;font-size: 13px;margin: 10px;color: #999;}
/* .imgBigShow{display: none;width: 400px;height: 400px;position: fixed;z-index: 1;top: 50px;border: 1px solid rgb(100,149,198);background: #fff no-repeat center;background-size: cover;}*/
</style>
</head>
<body>
<input type="file" id="choose" capture="camera" accept="image/*" multiple>
<p>压缩前：</p>
<ul class="img_list">
<!--<li style="background-image:url('/public/upload/upload.jpeg')">-->
<!--<div class="progress"><span style="width: 100%">上传成功</span></div>-->
<!--<div class="size">100KB</div>-->
<!--</li>-->
</ul>
<a id="addImg">添加图片</a>
<span class="tips">只允许上传jpg、png</span>
<p>压缩后：</p>
<ul class="imgCompress_list">
<!--<li style="background-image:url('/public/upload/upload.jpeg')">-->
<!--<div class="progress"><span style="width: 100%">上传成功</span></div>-->
<!--<div class="size">100KB</div>-->
<!--</li>-->
</ul>
<div id="submit">提交表单</div>
<!-- <div class="imgBigShow"></div> -->
<!-- processImg.js是压缩图片插件，exif.js是矫正图片方向的插件，processImg.js依赖于exif.js，所以exif.js要processImg.js在之前引入 -->
<script src="src/exif.js"></script>
<script src="src/processImg.js"></script>
<!-- 截止 -->
<script type="text/javascript">
var filechooser = document.getElementById("choose");
//用来存储压缩后的图片二进制数据
var blobFileList;
//点击添加图片
document.getElementById('addImg').onclick = function () {
filechooser.click();
}
//上传图片
document.getElementById('submit').onclick = function(){
if(blobFileList){
blobFileList.forEach(function (blobFile, i) {
console.log('正在上传第'+(i+1)+'张图片')
formUpData(blobFile);
})
}
}
//获取压缩后的图片
function getCompressiveFileList(fileList) {
blobFileList = fileList;
// console.log('fileBlobList:', fileList);
fileList.forEach(function (blob) {
var reader = new FileReader();
reader.onload = function () {
var li = document.createElement("LI")
li.style.backgroundImage = 'url('+this.result+')';
document.querySelector('.imgCompress_list').appendChild(li)
}
reader.readAsDataURL(blob);
})
}
//监听上传组件input的onchange事件，压缩图片，纠正图片方向，同时获取压缩后的图片
filechooser.onchange = function () {
var fileList = this.files;
// console.log('fileList:', fileList);
//预览压缩前的图片
var files = Array.prototype.slice.call(fileList);
files.forEach(function (file, i) {
var reader = new FileReader();
reader.onload = function () {
var li = document.createElement("LI")
li.style.backgroundImage = 'url('+this.result+')';
document.querySelector('.img_list').appendChild(li)
}
reader.readAsDataURL(file);
});
//处理图片列表，getCompressiveFileList接受处理后的图片数据列表
var process = window.lzImgProcess();
process(fileList, getCompressiveFileList);
}
//将压缩后的二进制图片数据流append到formdata对象中上传到后台服务器
//注意：上传的是formdata对象，后台接口接收的时候，也要从formdata对象中读取二进制数据流
function formUpData(blobFiles){
var formData = new FormData();
formData.append("files", blobFiles);
var xhr = new XMLHttpRequest();
//链接你自己上传图片接口即可，这里的接口地址，是我写的示例，不可真实使用，讲解意义更大
xhr.open('post', 'http://xxx/welcome/index/');
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log('上传成功！');
}
};
xhr.send(formData);
}
</script>
</body>
</html>