-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathttt.html
179 lines (155 loc) · 5.16 KB
/
ttt.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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片demo</title>
<style>
.container {
width: 1200px;
margin: 0 auto;
}
.top {
margin: 20px 0;
}
.list {
color: #005aa0;
margin-left: 20px;
cursor: pointer;
}
.original {
width: 600px;
height: 500px;
border: 1px solid #eee;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.change {
margin: 20px;
text-align: center;
}
.box {
float: left;
position: relative;
overflow: hidden;
border: 1px dashed #999;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
<input type="file" id="file" onchange="init()"/>
压缩倍数
<select onchange="select()" id="sel">
<option>1.0</option>
<option>0.8</option>
<option>0.5</option>
<option>0.1</option>
</select>
<a class="list" onclick="compress()">压缩</a>
<a class="list" onclick="crop()">裁切</a>
<a class="list" onclick="generate()">生成</a>
</div>
<div class="original" id="original">
<div class="box" id="box"></div>
</div>
<div class="change" id="change"></div>
</div>
</body>
<script>
var initImage;
var resultImage;
function init() {
let fileObj = document.getElementById('file').files[0] //上传文件的对象
let reader = new FileReader()
reader.readAsDataURL(fileObj)
reader.onload = function (e) {
let image = new Image() //新建一个img标签（不嵌入DOM节点，仅做canvas操作)
console.log(e.target.result);
initImage = e.target.result;
image.src = e.target.result //让该标签加载base64格式的原图
console.log(image);
image.style.maxWidth = `500px`;
image.style.maxHeight = `400px`;
const des = document.getElementById('box');
des.innerHTML = '';
des.appendChild(image);
}
}
</script>
<script>
var value;
function select() {
value = document.getElementById('sel').value;
console.log(value);
}
function compress() {
let image = new Image();
image.src = initImage;
image.onload = function () {
let canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
imageWidth = image.width, //压缩后图片的大小
imageHeight = image.height,
data = ''
canvas.width = imageWidth
canvas.height = imageHeight
context.drawImage(image, 0, 0, imageWidth, imageHeight)
data = canvas.toDataURL('image/jpeg', value)
//压缩完成
image.style.maxWidth = `500px`;
image.style.maxHeight = `400px`;
let image1 = image;
image1.src = data;
const des = document.getElementById('change');
des.innerHTML = '';
des.appendChild(image1);
resultImage = image1;
}
}
</script>
<script>
function crop() {
let image = new Image();
image.src = initImage;
/* image.style.maxWidth = `500px`;
image.style.maxHeight = `400px`;*/
image.onload = function () { //图片加载完毕后再通过canvas压缩图片，否则图片还没加载完就压缩，结果图片是全黑的
let canvas = document.createElement('canvas'), //创建一个canvas元素
context = canvas.getContext('2d'), //context相当于画笔，里面有各种可以进行绘图的API
imageWidth = image.width, //压缩后图片的宽度，这里设置为缩小一半
imageHeight = image.height, //压缩后图片的高度，这里设置为缩小一半
data = '' //存储压缩后的图片
canvas.width = imageWidth //设置绘图的宽度
canvas.height = imageHeight //设置绘图的高度
//使用drawImage重新设置img标签中的图片大小，实现压缩。drawImage方法的参数可以自行查阅W3C
context.drawImage(image, 120, 120, 250, 260, 0, 0, 450, 460)
//使用toDataURL将canvas上的图片转换为base64格式
data = canvas.toDataURL('image/jpeg')
//将压缩后的图片显示到页面上的img标签
let image1 = image;
image1.src = data;
const des = document.getElementById('change');
des.innerHTML = '';
des.appendChild(image1);
}
}
</script>
<script>
/**
* 下载图片
* @param {*}
*/
function generate() {
if (!resultImage) {
return false;
}
const a = document.createElement('A');
a.href = resultImage.src;
a.download = 'image';
a.click();
}
</script>
</html>