Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / Java Новый топик    Ответить
Топик располагается на нескольких страницах: Ctrl  назад   1 2 [3]      все
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
вадя
загружен в pic.src
а зачем тебе переменная pic так высоко в пространстве окна?
Ты ее в клас Load и потом класс грохнуть.
7 ноя 19, 16:20    [22011666]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
вадя,

https://stackoverflow.com/questions/22899333/delete-javascript-blobs
7 ноя 19, 16:27    [22011676]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16782
PetroNotC Sharp
а зачем тебе переменная pic так высоко в пространстве окна?
Ты ее в клас Load и потом класс грохнуть.
поробуй
7 ноя 19, 16:38    [22011682]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
вадя
PetroNotC Sharp
а зачем тебе переменная pic так высоко в пространстве окна?
Ты ее в клас Load и потом класс грохнуть.
поробуй
я не могу в твоем коде разобраться)).
7 ноя 19, 16:43    [22011683]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16782
PetroNotC Sharp,
тебе куда скинуть?
7 ноя 19, 17:31    [22011724]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
вадя,
Почту kpetro@mail.ru.
Посмотрю уже завтра.
Спс.
7 ноя 19, 18:03    [22011785]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
вадя,
Ну вот, можешь же когда захочешь)).
И чё три страницы спорил).
вадя
pic убрана из глобальных.
блобы удаляются
this.pic - теперь переменная класса
window.URL.revokeObjectURL(this.pic.src);

// delete this.pic; - это по вкусу, но роли не играет

У меня не исходная с хабра, а модифицированная уже своя версия.
Я там выход из цикла делал, ошибку в innerHtml, глобальные const переменные. Проверку файлов на русские буквы и вложенность.
Поэтому вручную счас буду твои правки вносить в Свою версию твоего js.
Нужно время.
Спасибо.
Если что, отпишусь.
8 ноя 19, 11:39    [22012200]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
вадя,
Ты вынес upload() выше уровнем?
Class Load
crop()
load_pic2()
upload()
Но оствил в классе или еще выше?
8 ноя 19, 12:32    [22012235]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
Class Load
crop()
load_pic2()
upload()
8 ноя 19, 12:33    [22012237]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
Коммент дай на функции.
8 ноя 19, 12:33    [22012238]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
mayton
Member

Откуда: loopback
Сообщений: 42861
Што у вас за возня под столом? Давайте паблишите сорцы. А то некрасиво другие ведь читают. А вы крысите важную инфу топика.
8 ноя 19, 12:40    [22012242]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
/* 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;
        }
    }



});
8 ноя 19, 13:00    [22012259]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
вадя,
Проверь еще раз. Не работает.
1. Заремуй строку обнуления имени файла zip для загрузки на сервер после всей работы.
2. Два раза загрузи 500 файлов подряд два раза нажав кнопку.
Итого будет 1000 блоб на клиенте.
Так?
8 ноя 19, 13:17    [22012274]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
mayton
Member

Откуда: loopback
Сообщений: 42861
Капец. Яж не юащик. А html дадите?
8 ноя 19, 13:20    [22012278]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
PetroNotC Sharp
Заремуй строку обнуления имени файла zip

//this.current_files.innerHTML = '' ;
8 ноя 19, 13:21    [22012281]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="css/poi-css.css">
<script src="js/vendor/jquery.min.js"  type="text/javascript"></script>
<script src="js/zip/jszip.min.js" type="text/javascript"></script>
<script src="js/zip/zip.js" type="text/javascript"></script>
<script src="js/zip/zip-ext.js" type="text/javascript"></script>
<script src="js/upload/loadphoto.js" type="text/javascript"></script>

<title>Загрузка на сервер</title>
</head>

   	<body>
        <div id="view">
			<label>Имя папки для загрузки на сервере (логин) <input type="text" id="dir-login-name" value="lena" style="width: 50px; height: 12px; text-align: center;"></label><br>
            <label>Размер просмотровый (px) <input type="text" id="full" value="1200" style="width: 50px; height: 12px; text-align: center;"></label><br>
            <label>Размер превью (px)       <input type="text" id="pre" value="75"  style="width: 50px; height: 12px; text-align: center;"></label><br>
            <input type="file" id="file" accept="application/zip" ><br>
            <input type="button" id="load_start" value=" Начать загрузку " style="margin: 13px 0 10px;width: 198px;"><br>
            <label>Загрузка<progress id="progress_load" max="100" value="0"></progress></label>
            Паттерн допустимых символов: /^[()!._a-zA-Z0-9\s]+$/
            <div id="current_files_"></div>
            <div id="process_time_"></div>
			<input type="button" id=del_dir_server" value=" УДАЛЕНИЕ ПАПКИ НА СЕРВЕРЕ !!! " onclick="delDirServer();return false;" style="margin: 13px 0 10px;width: 198px;"><br>
        </div>
</body>
</html>
8 ноя 19, 13:27    [22012295]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
mayton,
Хотел выложить тест из 3х файлов.
Оказвается не работает так
Проблема в протоколе file:/// - воркеры запрещены при исполнении скриптов из локального файла.
https://toster.ru/q/251740
)))
8 ноя 19, 14:25    [22012360]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16782
PetroNotC Sharp
Проверь еще раз. Не работает.
1. Заремуй строку обнуления имени файла zip для загрузки на сервер после всей работы.
2. Два раза загрузи 500 файлов подряд два раза нажав кнопку.
Итого будет 1000 блоб на клиенте.
Так?
работает, проверил.
блобов нет. их адреса появляются в отладчике, но попробуй из открыть - будет сообщение файл удалён

что значит два раза нажав кнопку?
все изменения на картинке
первое false на true - меняет синхронный режим на асинхронный

К сообщению приложен файл. Размер - 133Kb
8 ноя 19, 17:16    [22012501]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16782
PetroNotC Sharp,
не надо пугать браузеры этим
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

необходимо и достаточно такого
<!DOCTYPE html>
8 ноя 19, 17:21    [22012508]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
вадя
что значит два раза нажав кнопку?
ну типа накапливаются при повторном нажатии. Но раз ты говоришь, что только адреса то ОК.
Теперь уже понед.посмотрю.
8 ноя 19, 18:38    [22012558]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16782
PetroNotC Sharp
ну типа накапливаются при повторном нажатии. Но раз ты говоришь, что только адреса то ОК.
если по правилам - то надо блокировать эту кнопку на время загрузки.
исправлю.
9 ноя 19, 09:33    [22012676]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
PetroNotC Sharp
Member

Откуда:
Сообщений: 2446
вадя,
Да. Вроде расход ресурсов на клиенте решили общими усилиями. 500 картинок переданных уже не видны на клиенте.
Я тебе написал две просьбы.
Проверить тормоза в конце цикла и перестал идти прогрессбар.
Письмо получил?
12 ноя 19, 10:31    [22014171]     Ответить | Цитировать Сообщить модератору
 Re: вадя. Встретил твой код на хабре.  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 16782
PetroNotC Sharp,
видел, ответил
12 ноя 19, 23:28    [22014879]     Ответить | Цитировать Сообщить модератору
Топик располагается на нескольких страницах: Ctrl  назад   1 2 [3]      все
Все форумы / Java Ответить