-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
106 lines (96 loc) · 2.77 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.show-dom {
max-width: 100%;
max-height: 1000px;
overflow: auto;
}
</style>
</head>
<body>
<input type="file" accept="image/*" id="fileSelect">
<div>
旋转角度
<select id="change">
<option value="">原始</option>
<option value="90">顺时针90</option>
<option value="-90">逆时针90</option>
<option value="180">旋转180</option>
</select>
最大宽度:
<input type="text" value="750" id="maxWidth">
最大高度:
<input type="text" value="750" id="maxHeight">
<input type="button" value="下载" id="download">
</div>
<div class="show-dom">
<img src="" alt="" id="showImg">
</div>
<script src="./canvas-rotate-image.js"></script>
<script>
var $fileDom = document.getElementById('fileSelect');
var $change = document.getElementById('change');
var $imageDOM = document.getElementById('showImg');
var $maxWidth = document.getElementById('maxWidth');
var $maxHeight = document.getElementById('maxHeight');
var $downloadBtn = document.getElementById('download');
var fileReader = new FileReader();
var rotate = 0;
var imgBase64 = '';
var maxWidth = '';
var maxHeight = '';
var resultBase64 = '';
//
$fileDom.onchange = function (ev) {
var file = this.files[0];
fileReader.readAsDataURL(file);
};
//
$change.onchange = function () {
rotate = this.value;
_updateImg();
};
$downloadBtn.addEventListener('click', function () {
if (resultBase64) {
_downloadImg(_dataURLToFile(resultBase64));
}
}, false);
//
fileReader.onload = function (e) {
imgBase64 = e.target.result;
_updateImg();
};
//
function _updateImg() {
$imageDOM.src = '';
maxWidth = $maxWidth.value;
maxHeight = $maxHeight.value;
window.rotateImg(imgBase64, rotate, maxWidth, maxHeight, function (base64) {
$imageDOM.src = base64;
resultBase64 = base64;
});
}
function _dataURLToFile(base64) {
var arr = base64.split(",");
var bstr = atob(arr[1]);
var type = arr[0].replace("data:", "").replace(";base64", "")
let n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new File([u8arr], 'file', {type});
}
function _downloadImg(content) {
var aLink = document.createElement("a");
aLink.download = 'filename';
aLink.href = URL.createObjectURL(content);
aLink.click();
URL.revokeObjectURL(content);
}
</script>
</body>
</html>