-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathsave_img_test.html
99 lines (84 loc) · 3.24 KB
/
save_img_test.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>save img</title>
<script type="text/javascript" src="lib/jszip.js"></script>
<script type="text/javascript" src="lib/jszip-utils.js"></script>
<script type="text/javascript" src="lib/FileSaver.js"></script>
</head>
<body style="font-family: Courier； font-size:16px;">
<div style="white-space: pre-wrap;font-family: Courier;"> 圖片質素(1最高)：<input id="compress_rate" type="number" max="1" min="0.1" step="0.05" value="0.9"/>
<input type="file" onchange="output_img(img_list,this.files)" multiple/>
<hr />
</div>
<!-- -->
<div id="print_data" style="" contenteditable="true">
<span id="img_list"></span><br>
</div>
<button onclick="copyText(print_data)">Copy Text</button>
<button onclick="download_as_HTML()">Download As HTML</button>
<button onclick="download_all_img()">Download All Img</button>
<button onclick="download_all_img_as_zip()">Download All Img As Zip</button>
<script>
var print_data = document.getElementById("print_data");
var img_list = document.getElementById("img_list");
var compress_rate = document.getElementById("compress_rate");
function output(row,data){
row.innerHTML = data;
}
function output_img(row,data){
for(var i=0; i<data.length;i++){
let reader = new FileReader();
reader.readAsDataURL(data[i]);
reader.onload = ()=>{
let image = new Image();
image.src = reader.result;
image.onload = function(){
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
canvas.width = image.width;
canvas.height = image.height;
ctx.drawImage(image, 0, 0);
let compressed_image = canvas.toDataURL('image/jpeg', parseFloat(compress_rate.value));
row.insertAdjacentHTML("beforebegin", `<img src=${compressed_image} /><br />`)
};
};
}
}
function copyText(ele) {
window.getSelection().selectAllChildren(ele);
document.execCommand("copy");
}
function download_as_HTML(){
var link = document.createElement('a');
link.setAttribute('download', "all_img.html");
link.setAttribute('href', 'data:text/html;charset=utf-8,' + encodeURIComponent(`<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>`+print_data.outerHTML));
link.click();
}
function download_all_img(){
let img_arr = print_data.getElementsByTagName('img');
//alert(img_arr.length)
for(var i=0; i<img_arr.length;i++){
let link = document.createElement('a');
link.href = img_arr[i].src;
link.download = `${(new Date()).getFullYear()}_${(new Date()).getMonth()+1}_${(new Date()).getDate()}_${i+1}.jpg`;
link.click();
}
}
function download_all_img_as_zip(){
let img_arr = print_data.getElementsByTagName('img');
var zip = new JSZip();
for(var i=0; i<img_arr.length;i++){
zip.file(`${(new Date()).getFullYear()}_${(new Date()).getMonth()+1}_${(new Date()).getDate()}_${i+1}.jpg`, img_arr[i].src.replace('data:image/jpeg;base64,',''), {base64: true});
}
zip.generateAsync({type:"blob"})
.then(function(content) {
// see FileSaver.js
saveAs(content, `${(new Date()).getFullYear()}_${(new Date()).getMonth()+1}_${(new Date()).getDate()}_img.zip`);
});
}
</script>
</body>
</html>