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.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370.
371.
372.
373.
374.
375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
/* global zip */
//https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat
document.addEventListener("DOMContentLoaded", function () {
let loa;
let message = '';
document.querySelectorAll('script').forEach(function (item) {
const regex = /(.*\/)(jszip\.min\.js)/gm;
let m;
if ((m = regex.exec(item.src)) !== null) {
zip.workerScriptsPath = m[1]; // путь до папки слибой zip
zip.useWebWorkers = true;
return;
}
});
document.querySelector('#file').addEventListener('change', function () {
loa = new load(
document.querySelector('#full').value, // размер просмотрового фото
document.querySelector('#pre').value, // размер превь фото
this,
document.querySelector('#current_files_'), // див вывода текущего обрабатываемого файла
document.querySelector('#process_time_'), // див для вывода времени процесса
document.querySelector('#progress_load') // прогрессс загрузки
);
});
document.querySelector('#load_start').addEventListener('click', function () {
zip.createReader(new zip.BlobReader(document.querySelector('#file').files[0]), function (zipReader) {
// get all entries from the zip
zipReader.getEntries(function (entries) {
entries.forEach(function (entry) {
loa.map.push(entry);
});
console.table(loa.map);
if (document.querySelector('#del').checked) {
loa.del_previous();
}
loa.getFilen(); //запуск на обработку
});
});
});
class load {
constructor(
st_full_height,
st_preview_height,
input_zip_files,
current_files,
process_time,
progress_load
) {
// this.pic;
this.func_servlet = "func"; // для обработки команд
this.upload_servlet = "upload"; // для обработки команд
this.input_zip_files = input_zip_files;
this.st_full_height = st_full_height;
this.st_full_width = st_full_height;
this.st_preview_height = st_preview_height;
this.st_preview_width = st_preview_height;
this.pics = {
full_height: this.st_full_height,
full_width: this.st_full_width,
preview_height: this.st_preview_height,
preview_width: this.st_preview_width
};
this.matrix = new Array(6);
this.current_img = {
top: 0,
left: 0,
x: 0,
y: 0,
height: 0,
width: 0
};
this.new_img = {
top: 0,
left: 0,
x: 0,
y: 0,
height: 0,
width: 0
};
this.img = {height: 0,
width: 0,
rotate: 0,
scale: 1
};
this.id_crop = ['preview', 'full'];
this.crop = {
id: this.id_crop[1]
};
this.cropImg = 0;
this.deg_to_rad = Math.PI / 180;
this.rad_to_deg = 180 / Math.PI;
this.map = [];
this.filename;
this.current_files = current_files;
this.progress_load = progress_load;
this.process_time = process_time;
this.time_start;
this.canvas1 = document.createElement("canvas");
this.context = this.canvas1.getContext("2d");
this.getFilen = this.getFiles_();
}
del_previous() {
let formData = new FormData();
formData.append('comand', 'del_previous');
let xhr = new XMLHttpRequest();
xhr.open('POST', this.func_servlet, true);
xhr.onload = function (e) {
if (xhr.status !== 200) { // анализируем HTTP-статус ответа, если статус не 200, то произошла ошибка
// alert(`Ошибка ${xhr.status}: ${xhr.statusText}`); // Например, 404: Not Found
message = 'Ошибка ' + xhr.status + ' ' + xhr.statusText;
}
};
xhr.onerror = function () {
message = 'Ошибка ' + xhr.status + ' ' + xhr.statusText;
};
xhr.send(formData);
}
getFiles_() {
let mm = 0;
var urlFactory = window.URL || window.webkitURL;
this.time_start = performance.now();
return function () {
//
// if (this.delprevious.checked) {
// this.del_previous();
// }
this.progress_load.setAttribute('max', this.map.length);
if (this.map.length === mm || message.length !== 0) {
if (message.length !== 0) {
alert(message);
}
message = '';
console.log("закончено");
this.current_files.innerHTML = '';
this.process_time.innerHTML = '';
this.map.splice(0, this.map.length);
mm = 0;
this.input_zip_files.value = '';
this.progress_load.value = 0;
return 0;
} else {
getPic.call(this);
let t = performance.now() - this.time_start;
let m = t * this.map.length / mm - t;
this.process_time.innerHTML = 'прошло ' +
new Intl.NumberFormat('ru-RU', {maximumFractionDigits: 2}).format(t / 1000) +
'<br> осталось ' +
new Intl.NumberFormat('ru-RU', {maximumFractionDigits: 2}).format(m / 1000);
return mm;
}
};
function getPic() {
this.map[mm].getData(new zip.BlobWriter("image/jpeg"),
function (fileBlob) {
// "use strict";
this.progress_load.value = mm + 1;
this.current_files.innerHTML = (mm + 1) + ' из ' + this.map.length + ' >> ' + this.map[mm].filename;
this.filename = this.map[mm].filename;
try {
window.URL.revokeObjectURL(this.pic.src);
} catch (e) {
}
// delete this.pic;
this.pic = new Image();
this.pic.onload = function (p) {
this.img.height = p.target.height;
this.img.width = p.target.width;
if (p.target.height > p.target.width) {
this.img.scale = this.st_full_height / p.target.height;
this.pics.full_height = this.st_full_height;
this.pics.full_width = p.target.width * this.img.scale;
this.pics.preview_height = this.st_preview_height;
this.pics.preview_width = p.target.width * this.st_preview_height / p.target.height;
}
if (p.target.height < p.target.width) {
this.img.scale = this.st_full_width / p.target.width;
this.pics.full_width = this.st_full_width;
this.pics.full_height = p.target.height * this.img.scale;
this.pics.preview_width = this.st_preview_width;
this.pics.preview_height = p.target.height * this.st_preview_width / p.target.width;
}
if (p.target.height === p.target.width) {
this.img.scale = this.st_full_width / p.target.width;
this.pics.full_height = this.st_full_height;
this.pics.full_width = this.st_full_width;
this.pics.preview_height = this.st_preview_height;
this.pics.preview_width = this.st_preview_width;
}
var h = this.img.height * this.img.scale;
var w = this.img.width * this.img.scale;
this.new_img.height = this.current_img.height = h;
this.new_img.width = this.current_img.width = w;
this.new_img.top = this.current_img.top = 0;
this.new_img.left = this.current_img.left = 0;
this.new_img.x = this.current_img.x = this.pics.full_width / 2;
this.new_img.y = this.current_img.y = this.pics.full_height / 2;
this.img.rotate = 0;
this.cropp.call(this);
}.bind(this);
this.pic.src = urlFactory.createObjectURL(fileBlob, {type: "image/jpeg"});
mm++;
}.bind(this),
function (current, total) {
// console.log(current, total);
}
);
}
}
cropp() {
var crop_width = this.cropImg === 0 ? this.pics.full_width : this.pics.preview_width;
var crop_height = this.cropImg === 0 ? this.pics.full_height : this.pics.preview_height;
var sq = Math.sqrt(crop_width * crop_width + crop_height * crop_height);
var x = Math.floor((this.new_img.x - sq / 2) / this.img.scale);
var y = Math.floor((this.new_img.y - sq / 2) / this.img.scale);
var w = Math.floor(sq / this.img.scale);
var h = Math.floor(sq / this.img.scale);
this.canvas1.height = h;
this.canvas1.width = w;
this.context.fillStyle = '#ffffff';
this.context.fillRect(0, 0, w, h);
this.context.drawImage(this.pic, x, y, w, h, 0, 0, w, h);
var pic = new Image();
pic.onload = function () {
this.canvas1.height = sq;
this.canvas1.width = sq;
this.context.translate(sq / 2, sq / 2);
this.context.rotate((this.img.rotate * Math.PI) / 180);
this.context.drawImage(pic, -sq / 2, -sq / 2);
pic.onload = load_pic2.call(this);
pic.src = this.canvas1.toDataURL("image/jpeg", 1.0);
}.bind(this);
if (this.img.scale < 1) {
pic.src = this.resize(this.canvas1, sq, sq);
} else {
pic.src = this.resize_(this.canvas1, sq, sq);
}
function load_pic2() {
this.canvas1.height = crop_height;
this.canvas1.width = crop_width;
var x = (sq - crop_width) / 2;
var y = (sq - crop_height) / 2;
this.context.drawImage(pic, x, y, crop_width, crop_height, 0, 0, crop_width, crop_height);
this.canvas1.toBlob(this.upload.bind(this), "image/jpeg", 1);
}
}
upload(blobOrFile) {
var formData = new FormData();
formData.append("userfile", blobOrFile, this.filename);
formData.append('full_preview', this.cropImg);
var xhr = new XMLHttpRequest();
xhr.open('POST', this.upload_servlet, true);
xhr.onload = function (e) {
if (xhr.status !== 200) { // анализируем HTTP-статус ответа, если статус не 200, то произошла ошибка
alert(`Ошибка ${xhr.status}: ${xhr.statusText}`); // Например, 404: Not Found
} else { // если всё прошло гладко, выводим результат
// setTimeout(function () {
// message = 'Ошибка ' + xhr.status + ' ' + xhr.statusText;
// }, 500);
// console.log(xhr.response); // response -- это ответ сервера
}
};
xhr.upload.onprogress = function (e) {
// console.log(e);
// if (e.lengthComputable) {
// progressBar.value = (e.loaded / e.total) * 100;
// progressBar.textContent = progressBar.value; // Fallback for unsupported browsers.
// throw 11
// }
};
xhr.onerror = function () {
message = 'Ошибка ' + xhr.status + ' ' + xhr.statusText;
// alert("Загрузка " + this.filename + " не удалась");
};
xhr.send(formData);
this.cropImg = this.crop.id === this.id_crop[1] ? (this.cropImg | 2) : (this.cropImg | 1);
this.full_pre();
if (this.cropImg === 2) {
this.cropp();
}
}
resize(img, w, h) {//уменьшение
var steps = Math.ceil(Math.log(img.height / h) / Math.LN2);
var sW = w * Math.pow(2, steps - 1);
var sH = h * Math.pow(2, steps - 1);
var canvas2;
while (steps--)
{
canvas2 = document.createElement('canvas');
canvas2.width = sW;
canvas2.height = sH;
canvas2.getContext('2d').drawImage(img, 0, 0, sW, sH);
img = canvas2;
sW = Math.round(sW / 2);
sH = Math.round(sH / 2);
}
return canvas2.toDataURL("image/jpeg", 1);
}
resize_(img, w, h) {//увеличение
var steps = Math.ceil(Math.log(h / img.height) / Math.LN2);
var sW = w * Math.pow(2, steps - 1);
var sH = h * Math.pow(2, steps - 1);
var canvas2;
while (steps--)
{
canvas2 = document.createElement('canvas');
canvas2.width = sW;
canvas2.height = sH;
canvas2.getContext('2d').drawImage(img, 0, 0, sW, sH);
img = canvas2;
sW = Math.round(sW * 2);
sH = Math.round(sH * 2);
}
return canvas2.toDataURL("image/jpeg", 1);
}
full_pre() {
if (this.crop.id === 'preview')
{
// -- включение режима full --
this.crop.id = this.id_crop[1];
this.img.scale *= this.pics.full_width / this.pics.preview_width;
this.setres();
this.cropImg = 0;
this.getFilen();
} else {
// -- включение режима preview --
this.crop.id = this.id_crop[0];
this.img.scale *= this.pics.preview_width / this.pics.full_width;
this.setres();
}
}
setres() {
const new_h = this.img.height * this.img.scale;
this.new_img.x = this.new_img.x * new_h / this.new_img.height;
this.new_img.height = new_h;
const new_w = this.img.width * this.img.scale;
this.new_img.y = this.new_img.y * new_w / this.new_img.width;
this.new_img.width = new_w;
this.current_img.x = this.new_img.x;
this.current_img.y = this.new_img.y;
const ang = -1 * this.img.rotate * this.deg_to_rad;
this.matrix[0] = Math.cos(ang);
this.matrix[1] = -Math.sin(ang);
this.matrix[2] = Math.sin(ang);
this.matrix[3] = Math.cos(ang);
this.matrix[4] = 0;
this.matrix[5] = 0;
}
}
});
