Отправить запрос на подгрузку изображения

@Dmit199 · 15.10.2024, 12:02. **Показов** 1402. **Ответов** 26

Студворк — интернет-сервис помощи студентам

Как в js, подгрузить изображение и получить ответ, успешно либо указанного изображения нету на сервере.

@kidASM · 16.10.2024, 23:12

Dmit199, voraa
Пример

PHP/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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Upload video</title>
        <style>
            video {
                width: 500px;
            }
            section:last-child {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                gap: 20px;
            }
            section:last-child > img {
                display: flex;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <main>
            <form name="videoFile">
                <label for="videoFileInp">Выберите видео:</label><br>
                <input type="file" id="videoFileInp" name="videoFileInp" accept="video/*" />
            </form>
            <section></section>
            <section></section>
        </main>
        <script>
            var form = document.forms.videoFile;
            var elmSection = document.getElementsByTagName("section");
 
            var screenshotsLimit = 3;
            var nameClass = "thumbs";
            var arrImages = [];
            
            form.addEventListener("change", function(event){
                event.preventDefault();
                var elmVideo = document.createElement("VIDEO");
                
                var reader = new FileReader();
                reader.onload = function(e) {
                    elmVideo.src = URL.createObjectURL(form.videoFileInp.files[0]);
                    elmVideo.load();
                    elmVideo.controls = true;
                    elmSection[0].append(elmVideo); // Отображает видео (добавляет в DOM)
                }.bind(this);
                reader.readAsDataURL(form.videoFileInp.files[0]);
 
                elmVideo.addEventListener("timeupdate", (event) => {
                    var canvas = document.createElement("CANVAS");
                    canvas.height = elmVideo.videoHeight;
                    canvas.width = elmVideo.videoWidth;
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(elmVideo, 0, 0, canvas.width, canvas.height);
 
                    var img = new Image();
                    img.className = nameClass;
                    img.src = canvas.toDataURL();
                    canvas.toBlob(function(blob) {
                        arrImages.push(blob); 
                        if(elmSection[1].childNodes.length == screenshotsLimit){
                            var images = document.getElementsByClassName(nameClass);
                            const formData = new FormData();
                            formData.append("videoFile", form.videoFileInp.files[0], getNewFileName()+"."+form.videoFileInp.files[0].type.split("/")[1]);
                            for(var i=0; i<arrImages.length; i++){
                                formData.append("img"+(i+1), arrImages[i], getNewFileName()+".png");
                            }
 
                            (async function(){
                                const response = await fetch("/upload-video-with-thumbs", {
                                    method: "POST",
                                    body: formData,
                                });
                            })();
                        }
                    });
                    elmSection[1].append(img);
                });
 
                elmVideo.addEventListener("loadeddata", function(){
                    var counter = 0;
                    var interval = setInterval(function(){
                        // Случайна позиция в видео
                        elmVideo.currentTime = parseFloat((elmVideo.duration * Math.random()).toFixed(2)) 
                        counter++;
                        if(counter >= screenshotsLimit){
                            clearInterval(interval);
                        }
                    }, 1000);
                });
            });
 
            function getNewFileName(){
                var date = new Date();
                return "" + date.getTime() + "_" + self.crypto.randomUUID();
            }
        </script>
    </body>
</html>

Результат:
simplescreenrecorder-2024-10-16_23.07.43.mp4

@atanov · 17.10.2024, 09:10

Сообщение от kidASM

зачем это делать на сервере

Сообщение от kidASM

Отправляет Ajax-запрос (один запрос) содержащий видео и скриншот(ы).
Сервер примет запрос

как эти две мысли состыковываются?

@kidASM · 17.10.2024, 13:04

Очень сильно снизит нагрузку на сервер, т.е. увеличит количество обслуживаемых пользователей (а это подписка/деньги).

@barabar · 17.10.2024, 13:12

Сообщение от kidASM

Очень сильно снизит нагрузку на сервер, т.е. увеличит количество обслуживаемых пользователей

Эти понятия не всегда связаны между собой. При увеличении нагрузки заказывается сервер по мощнее или еще один или несколько. А если страницы сайта будут тупить, то посетителей станет наоборот меньше. Да и гугл это видит через свои браузеры и понижает выдачу.

@kidASM · 17.10.2024, 14:27

Сообщение от barabar

При увеличении нагрузки заказывается сервер по мощнее или еще один или несколько.

И наверное заказчик/инвестор скажет "больше спасибо" за то, что тратишь его деньги.

Сообщение от barabar

А если страницы сайта будут тупить, то посетителей станет наоборот меньше.

В моём примере есть задержки (прочитай код), для визуализации. С другой стороны, зависит от мощность компьютера пользователя. Если пользователь знает что у него слабый компьютер, (скорее всего) он готов немного ждать. А если мощный комп, задержек не будет.

Сообщение от barabar

Да и гугл это видит через свои браузеры и понижает выдачу.

Думаешь лучше чтоб все пользователи ждали, пока "один" сервер обработает одно видео (по запросу одного пользователя)?

@barabar · 17.10.2024, 14:37

Сообщение от kidASM

Думаешь лучше чтоб все пользователи ждали, пока "один" сервер обработает одно видео (по запросу одного пользователя)?

Я по этому поводу вообще ничего не думаю. У вас свой спор и я в него не вмешиваюсь. Сказал только то, что хотел сказать.

@kidASM · 17.10.2024, 14:39

Сообщение от barabar

У вас свой спор и я в него не вмешиваюсь.

Спора никакого нет. Я просто сказала (и привел пример кода) что, то что они делают, - не лучшее решение.

Новые блоги и статьи Все статьи Все блоги /
Саморегулирующийся социальный контракт для сервера cross-section. Hrethgir 14.08.2026 С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .	Часы электронные Uhbif79 12.08.2026 Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .	Часы с будильником на основе класса QLCDNumber Uhbif79 12.08.2026 Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .	Установка MinGW GCC 16.2 и CMake 8Observer8 10.08.2026 VK Видео: https:/ / vkvideo. ru/ video-240781534_456239017 YouTube: eY5-5PyI9NM Текстовая версия
Неделя из жизни имитационной модели склада: мои кривые руки растут, откуда надо anaschu 10.08.2026 Неделя из жизни имитационной модели склада: как я почти написал неправильную логику и что с этим делать Работаю сейчас над учебно-рабочим проектом: строю в AnyLogic имитационную модель процессов. . .	Калькулятор для расчета родства russiannick 07.08.2026 1. Задача: Создать калькулятор для расчета родства. Родственных связей существует 8 ступеней, такие как: p - отец P - мать q - муж Q - жена b - брат B - сестра s - сын S - дочь	Мир по моей воле kumehtar 07.08.2026 Когда-то кажется, что всё просто. Ты весь такой светлый. Причиняешь добро. Борешься за справедливость в этом тёмном мире. Потом начинаешь замечать одну неприятную вещь. Почти каждый хороший. . .	Кредитный калькулятор Maks 05.08.2026 Решение задачи по прикладной информатике средствами 1С. Задача: Напишите приложение-калькулятор, которое помогает рассчитывать параметры кредита для аннуитетного и дифференцированного видов. . .

@Dmit199 Заблокирован

	Отправить запрос на подгрузку изображения 15.10.2024, 12:02. Показов 1402. Ответов 26 Метки нет (Все метки) Как в js, подгрузить изображение и получить ответ, успешно либо указанного изображения нету на сервере. 0

@kidASM 427 / 316 / 115 Регистрация: 28.08.2013 Сообщений: 871
	17.10.2024, 13:04
	Очень сильно снизит нагрузку на сервер, т.е. увеличит количество обслуживаемых пользователей (а это подписка/деньги). 0