Как найти ссылки на исходные изображения?

@supmener · Регистрация: 26.06.2013

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

Здесь 3 страницы статьи https://www.zr.ru/archive/zr/1... lomaiutsia
Как, используя например DevTools, увидеть ссылки на исходные изображения, чтобы сохранить их на ПК?

@voraa · 07.12.2025, 20:57

Там изображение склеено из многих маленьких картинок.

Ну надо просто уметь работать в devtools. Открываете вкладку Elements и просто ищите нужный. Ведете мышью по элементам на devtools, выбранный на странице выделяется голубым. Если он закрыт, открываете его....

Как то так это выглядит

(Хрень какая то. Делаю снимок экрана, а форум говорит, что этот файл .png не является изображением)

@supmener · 07.12.2025, 21:16 **[ТС]**

А при этом на другой панели, где:
Styles, Computed, Layout
что должно быть открыто, какая вкладка?

@voraa · 07.12.2025, 21:25

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

Styles, Computed, Layout
что должно быть открыто, какая вкладка?

Да без разницы.
Ну то есть, что надо то и смотрите. Если назначенные стили и классы, то Styles, если то, что вычислил по этим стилям и классам браузер, то Computed.
Вам же надо найти сам элемент img, который отображает эту картинку и его атрибут src.
А то все есть на вкладке Elements

@supmener · 07.12.2025, 22:16 **[ТС]**

Взял таким способом DIV с картинками и попросил искусственный интеллект сделать табличную верстку, но теряется самый низ. Табличную верстку попробовал, потому что DIV верстка тоже не все включила.

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Панорама с табличной версткой</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
            position: relative;
        }
        .header {
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .pano-wrapper {
            position: relative;
            display: table;
            margin: 0 auto;
            background: #000;
        }
        .pano-table {
            border-spacing: 0;
            border-collapse: collapse;
            background: #000;
        }
        .pano-table td {
            width: 256px;
            height: 256px;
            padding: 0;
            vertical-align: top;
        }
        .tile {
            display: block;
            width: 256px;
            height: 256px;
            border: none;
            image-rendering: pixelated;
        }
        .blank-tile {
            position: absolute;
            top: -291px;
            left: -326px;
            z-index: -1;
        }
        .info {
            padding: 20px;
            text-align: center;
            color: #666;
        }
        @media (max-width: 1360px) {
            .pano-wrapper {
                transform: scale(0.9);
                transform-origin: center;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
 
        </div>
        
        <div class="pano-wrapper">
            <!-- Фоновый тайл -->
            <img src="https://www.zr.ru/archive/public/libs/panojs3/images/blank.gif" 
                 class="blank-tile" alt="background">
            
            <!-- Табличная сетка тайлов -->
            <table class="pano-table">
                <tr>
                    <!-- Строка 1 (top: -291px) -->
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/001" class="tile" alt="tile-000001"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/001" class="tile" alt="tile-001001"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/001" class="tile" alt="tile-002001"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/001" class="tile" alt="tile-003001"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/001" class="tile" alt="tile-004001"></td>
                </tr>
                <tr>
                    <!-- Строка 2 (top: -35px) -->
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/002" class="tile" alt="tile-000002"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/002" class="tile" alt="tile-001002"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/002" class="tile" alt="tile-002002"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/002" class="tile" alt="tile-003002"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/002" class="tile" alt="tile-004002"></td>
                </tr>
                <tr>
                    <!-- Строка 3 (top: 221px) -->
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/003" class="tile" alt="tile-000003"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/003" class="tile" alt="tile-001003"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/003" class="tile" alt="tile-002003"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/003" class="tile" alt="tile-003003"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/003" class="tile" alt="tile-004003"></td>
                </tr>
                <tr>
                    <!-- Строка 4 (top: 477px) -->
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/004" class="tile" alt="tile-000004"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/004" class="tile" alt="tile-001004"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/004" class="tile" alt="tile-002004"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/004" class="tile" alt="tile-003004"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/004" class="tile" alt="tile-004004"></td>
                </tr>
                <tr>
                    <!-- Строка 5 (top: 733px) -->
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/005" class="tile" alt="tile-000005"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/005" class="tile" alt="tile-001005"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/005" class="tile" alt="tile-002005"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/005" class="tile" alt="tile-003005"></td>
                    <td><img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/005" class="tile" alt="tile-004005"></td>
                </tr>
            </table>
        </div>
        
        <div class="info">
            <p><strong>Характеристики:</strong> 1280×1280px (5×5 тайлов по 256×256px)</p>
            <p><strong>Верстка:</strong> HTML таблица с <code>border-collapse: collapse</code></p>
            <p><strong>Адаптивность:</strong> Автомасштабирование на малых экранах</p>
        </div>
    </div>
</body>
</html>

Добавлено через 43 секунды

HTML5
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
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Собранная панорама</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            background: #f5f5f5;
            font-family: Arial, sans-serif;
        }
        .container {
            max-width: 1400px;
            margin: 0 auto;
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .well {
            position: relative;
            width: 1280px;
            height: 1024px;
            background: #000;
            margin: 0 auto;
            overflow: hidden;
        }
        .tile {
            position: absolute;
            width: 256px;
            height: 256px;
            border: none;
            image-rendering: pixelated;
        }
        .header {
            text-align: center;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        .info {
            padding: 20px;
            text-align: center;
            color: #665;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
 
        </div>
        
        <div class="well">
            <!-- Левая колонка (x: -70px) -->
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/001" class="tile" style="top: -291px; left: -70px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/002" class="tile" style="top: -35px; left: -70px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/003" class="tile" style="top: 221px; left: -70px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/004" class="tile" style="top: 477px; left: -70px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/000/005" class="tile" style="top: 733px; left: -70px;">
            
            <!-- Вторая колонка (x: 186px) -->
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/001" class="tile" style="top: -291px; left: 186px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/002" class="tile" style="top: -35px; left: 186px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/003" class="tile" style="top: 221px; left: 186px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/004" class="tile" style="top: 477px; left: 186px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/001/005" class="tile" style="top: 733px; left: 186px;">
            
            <!-- Третья колонка (x: 442px) -->
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/001" class="tile" style="top: -291px; left: 442px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/002" class="tile" style="top: -35px; left: 442px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/003" class="tile" style="top: 221px; left: 442px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/004" class="tile" style="top: 477px; left: 442px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/002/005" class="tile" style="top: 733px; left: 442px;">
            
            <!-- Четвертая колонка (x: 698px) -->
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/001" class="tile" style="top: -291px; left: 698px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/002" class="tile" style="top: -35px; left: 698px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/003" class="tile" style="top: 221px; left: 698px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/004" class="tile" style="top: 477px; left: 698px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/003/005" class="tile" style="top: 733px; left: 698px;">
            
            <!-- Пятая колонка (x: 954px) -->
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/001" class="tile" style="top: -291px; left: 954px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/002" class="tile" style="top: -35px; left: 954px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/003" class="tile" style="top: 221px; left: 954px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/004" class="tile" style="top: 477px; left: 954px;">
            <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/000/004/005" class="tile" style="top: 733px; left: 954px;">
            
            <!-- Фоновый тайл -->
            <img src="https://www.zr.ru/archive/public/libs/panojs3/images/blank.gif" style="top: -291px; left: -326px; position: absolute;">
        </div>
        
        <div class="info">
            <p><strong>Размер панорамы:</strong> 1280×1024px (5×5 тайлов по 256×256px)</p>
            <p>Страница полностью восстанавливает оригинальную верстку с точными позициями тайлов.</p>
        </div>
    </div>
</body>
</html>

@rr33rr · 08.12.2025, 12:25

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

Взял таким способом DIV с картинками и попросил искусственный интеллект сделать табличную верстку, но теряется самый низ. Табличную верстку попробовал, потому что DIV верстка тоже не все включила.

Вроде такого можно делать:

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
<!doctype html>
<html>
<head>
<style>
.well-flex {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 844px; /*calc(3*256px + 76px)*/
}
</style>
</head>
<body>
<!-- 1я страница -->
<div class="well-flex">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/000">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/001">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/002">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/003">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/000">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/001">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/002">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/003">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/000">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/001">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/002">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/003">
</div>
<!-- 2я страница -->
<div class="well-flex">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/000">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/001">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/002">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/003">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/000">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/001">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/002">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/003">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/000">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/001">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/002">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/003">
</div>
<!-- 3я страница -->
<div class="well-flex">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/000">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/001">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/002">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/003">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/000">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/001">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/002">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/003">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/000">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/001">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/002">
  <img src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/003">
</div>
 
</body>
</html>

@kidASM · 08.12.2025, 16:53

rr33rr, А ведь это можно всё вместо обратно собрать. Немного с ИИ поигрался и вот результат. И картинку можно просто сохранить.

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
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
<!doctype html>
<html>
    <head>
    <style>
        .well-flex {
            display: none;
        }
        #myCanvas {
            display: hidden;
        }
    </style>
    </head>
    <body>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/003">
    </div>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/003">
    </div>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/003">
    </div>
    <div id="result"></div>
    <canvas id="myCanvas"></canvas>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                const pageContainers = document.getElementsByClassName("well-flex");
                const divResult = document.getElementById("result");
                const canvas = document.getElementById("myCanvas");
 
                if (divResult && pageContainers.length > 0 && canvas) {
                    const ctx = canvas.getContext("2d");
                    
                    // Новые параметры сетки: 3 столбца (COLUMNS) и 4 строки (ROWS)
                    const COLUMNS = 3;
                    const ROWS = 4; // Теперь 4 строки по вертикали
 
                    // Используем setTimeout, чтобы изображения успели загрузиться.
                    setTimeout(function(){
                        for(let i = 0; i < pageContainers.length; i++){
                            const fragments = pageContainers[i].children;
                            const totalFragments = fragments.length;
 
                            if (totalFragments !== COLUMNS * ROWS || fragments[0].naturalWidth === 0) {
                                console.warn(`Пропускаем страницу ${i + 1}. Ожидалось ${COLUMNS * ROWS}, получено ${totalFragments}. Изображения еще не загружены или их количество неверно.`);
                                continue;
                            }
 
                            // Размеры одного фрагмента (натуральные размеры после загрузки)
                            const fragmentWidth = fragments[0].naturalWidth;
                            const fragmentHeight = fragments[0].naturalHeight;
 
                            // 1. Корректный расчет общего размера холста
                            const totalWidth = COLUMNS * fragmentWidth; // 3 * Ширина_фрагмента
                            const totalHeight = ROWS * fragmentHeight;   // 4 * Высота_фрагмента
                            
                            // Устанавливаем размеры холста
                            ctx.canvas.width = totalWidth;
                            ctx.canvas.height = totalHeight;
                            ctx.clearRect(0, 0, totalWidth, totalHeight); // Очищаем холст
 
                            
                            // 2. Корректная логика цикла для отрисовки (порядок по столбцам)
                            for(let idx = 0; idx < totalFragments; idx++){
                                
                                // Расчет столбца (k): 0-3 => 0; 4-7 => 1; 8-11 => 2
                                const col = Math.floor(idx / ROWS); 
                                
                                // Расчет строки (l): 0, 4, 8 => 0; 1, 5, 9 => 1; и т.д.
                                const row = idx % ROWS;
                                
                                // Координаты для отрисовки
                                const drawX = col * fragmentWidth;    // X-координата (зависит от столбца col)
                                const drawY = row * fragmentHeight;   // Y-координата (зависит от строки row)
 
                                try {
                                    ctx.drawImage(
                                        fragments[idx], 
                                        drawX, 
                                        drawY, 
                                        fragmentWidth, 
                                        fragmentHeight
                                    );
                                } catch (e) {
                                    console.error(`Ошибка при отрисовке фрагмента ${idx} на странице ${i + 1}:`, e);
                                    return;
                                }
                            }
                            
                            // 3. Создание и добавление собранного изображения
                            const assembledImg = new Image();
                            assembledImg.src = ctx.canvas.toDataURL(); 
                            assembledImg.style.display = 'block';
                            assembledImg.style.margin = '20px 0';
                            
                            divResult.appendChild(assembledImg);
                            
                            console.log(`Страница ${i + 1} успешно собрана (${totalWidth}x${totalHeight}).`);
                        }
                    }, 3000); // 3-секундная задержка
                } else {
                    console.error("Не найдены необходимые DOM-элементы.");
                }
            });
        </script>
    </body>
</html>

@voraa · 08.12.2025, 17:35

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

Немного с ИИ поигрался и вот результат.

Странный ИИ. Не знает про функцию decode() которая возвращает промис, когда картинка будет загружена? И вместо этого предлагает ждать 3 сек? А почему 3? А может у кого сеть плохая и надо ждать 5 или 10?

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
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
<!doctype html>
<html>
 
<head>
    <style>
        .well-flex {
            display: none;
        }
 
        #myCanvas {
            display: hidden;
        }
    </style>
</head>
 
<body>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/003">
    </div>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/003">
    </div>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/003">
    </div>
    <div id="result"></div>
    <canvas id="myCanvas"></canvas>
    <script>
        document.addEventListener('DOMContentLoaded', async function () {
            const pageContainers = document.querySelectorAll(".well-flex");
            const divResult = document.getElementById("result");
            const canvas = document.getElementById("myCanvas");
 
            if (divResult && pageContainers.length > 0 && canvas) {
                const ctx = canvas.getContext("2d");
 
                // Новые параметры сетки: 3 столбца (COLUMNS) и 4 строки (ROWS)
                const COLUMNS = 3;
                const ROWS = 4; // Теперь 4 строки по вертикали
 
                for (let i = 0; i < pageContainers.length; i++) {
                    const container = pageContainers[i];
                    const fragments = container.querySelectorAll('img');
                    const totalFragments = fragments.length;
 
                    try {
                        await Promise.all([...fragments].map(fr => fr.decode()));
                    } catch (e) {
                        console.warn(`Пропускаем страницу ${i + 1}. Ошибка загрузки фрагмента`);
                        continue;
                    }
 
                    if (totalFragments !== COLUMNS * ROWS || fragments[0].naturalWidth === 0) {
                        console.warn(`Пропускаем страницу ${i + 1}. Ожидалось ${COLUMNS * ROWS}, получено ${totalFragments}. Изображения еще не загружены или их количество неверно.`);
                        continue;
                    }
                    // Размеры одного фрагмента (натуральные размеры после загрузки)
                    const fragmentWidth = fragments[0].naturalWidth;
                    const fragmentHeight = fragments[0].naturalHeight;
 
                    // 1. Корректный расчет общего размера холста
                    const totalWidth = COLUMNS * fragmentWidth; // 3 * Ширина_фрагмента
                    const totalHeight = ROWS * fragmentHeight;   // 4 * Высота_фрагмента
 
                    // Устанавливаем размеры холста
                    ctx.canvas.width = totalWidth;
                    ctx.canvas.height = totalHeight;
                    ctx.clearRect(0, 0, totalWidth, totalHeight); // Очищаем холст
 
 
                    // 2. Коррекlet idx
                    for (let idx = 0; idx < totalFragments; idx++) {
 
                        // Расчет столбца (k): 0-3 => 0; 4-7 => 1; 8-11 => 2
                        const col = Math.floor(idx / ROWS);
 
                        // Расчет строки (l): 0, 4, 8 => 0; 1, 5, 9 => 1; и т.д.
                        const row = idx % ROWS;
 
                        // Координаты для отрисовки
                        const drawX = col * fragmentWidth;    // X-координата (зависит от столбца col)
                        const drawY = row * fragmentHeight;   // Y-координата (зависит от строки row)
 
                        try {
                            ctx.drawImage(
                                fragments[idx],
                                drawX,
                                drawY,
                                fragmentWidth,
                                fragmentHeight
                            );
                        } catch (e) {
                            console.error(`Ошибка при отрисовке фрагмента ${idx} на странице ${i + 1}:`, e);
                            return;
                        }
                    }
 
                    // 3. Создание и добавление собранного изображения
                    const assembledImg = new Image();
                    assembledImg.src = ctx.canvas.toDataURL();
                    assembledImg.style.display = 'block';
                    assembledImg.style.margin = '20px 0';
 
                    divResult.appendChild(assembledImg);
 
                    console.log(`Страница ${i + 1} успешно собрана (${totalWidth}x${totalHeight}).`);
                }
            } else {
                console.error("Не найдены необходимые DOM-элементы.");
            }
        });
    </script>
</body>
 
</html>

Добавлено через 7 минут
А вот на счет сохранить картинку - у меня большие сомнения.
Та CORS error полезут, если хоть один кусочек canvas пришел из другого источника.

@kidASM · 08.12.2025, 18:10

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

Странный ИИ. Не знает про функцию decode() которая возвращает промис

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

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

А вот на счет сохранить картинку - у меня большие сомнения.

Проверь. У меня сохраняет.

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

Та CORS error полезут, если хоть один кусочек canvas пришел из другого источника.

Как думаешь, зачем атрибут crossOrigin="anonymous"?

@voraa · 08.12.2025, 19:22

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

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

В данном случае, я этого не жду. Там стоит Promise.all. Ждет, когда загрузятся все, не важно в каком порядке.

Но можно оптимизировать и ждать загрузки рисунков в порядке их обработки. Когда нужен очередной рисунок в цикле, то ждем его загрузки. То, что следующие могут загрузиться раньше - не важно. Когда очередь дойдет до них, они будут уже загружены и ожидания не будет

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
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
<!doctype html>
<html>
 
<head>
    <style>
        .well-flex {
            display: none;
        }
 
        #myCanvas {
            display: hidden;
        }
    </style>
</head>
 
<body>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/003">
    </div>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/003">
    </div>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/003">
    </div>
    <div id="result"></div>
    <script>
        document.addEventListener('DOMContentLoaded', async function () {
            const pageContainers = document.querySelectorAll(".well-flex");
            const divResult = document.getElementById("result");
            //const canvas = document.getElementById("myCanvas");
            const canvas = document.createElement('canvas');
 
            if (divResult && pageContainers.length > 0 && canvas) {
                const ctx = canvas.getContext("2d");
 
                // Новые параметры сетки: 3 столбца (COLUMNS) и 4 строки (ROWS)
                const COLUMNS = 3;
                const ROWS = 4; // Теперь 4 строки по вертикали
 
                for (let i = 0; i < pageContainers.length; i++) {
                    const container = pageContainers[i];
                    const fragments = container.querySelectorAll('img');
                    const totalFragments = fragments.length;
 
 
                    //                    if (totalFragments !== COLUMNS * ROWS || fragments[0].naturalWidth === 0) {
                    //                        console.warn(`Пропускаем страницу ${i + 1}. Ожидалось ${COLUMNS * ROWS}, получено ${totalFragments}. Изображения еще не загружены или их количество неверно.`);
                    //                        continue;
                    //                   }
                    // Размеры одного фрагмента (натуральные размеры после загрузки)
 
                    let fragmentWidth, fragmentHeight, totalWidth, totalHeight;
                    // 2. Коррекlet idx
                    try {
                    for (let idx = 0; idx < totalFragments; idx++) {
                        try {
                            await fragments[idx].decode();
                        } catch (e) {
                            throw new Error(`Пропускаем страницу ${i + 1}.Ошибка загрузки фрагмента ${idx + 1}`);
                        }
 
                        if (idx == 0) {
                            fragmentWidth = fragments[0].naturalWidth;
                            fragmentHeight = fragments[0].naturalHeight;
 
                            // 1. Корректный расчет общего размера холста
                            totalWidth = COLUMNS * fragmentWidth; // 3 * Ширина_фрагмента
                            totalHeight = ROWS * fragmentHeight;   // 4 * Высота_фрагмента
 
                            // Устанавливаем размеры холста
                            ctx.canvas.width = totalWidth;
                            ctx.canvas.height = totalHeight;
                            ctx.clearRect(0, 0, totalWidth, totalHeight); // Очищаем холст
 
                        }
 
                        // Расчет столбца (k): 0-3 => 0; 4-7 => 1; 8-11 => 2
                        const col = Math.floor(idx / ROWS);
 
                        // Расчет строки (l): 0, 4, 8 => 0; 1, 5, 9 => 1; и т.д.
                        const row = idx % ROWS;
 
                        // Координаты для отрисовки
                        const drawX = col * fragmentWidth;    // X-координата (зависит от столбца col)
                        const drawY = row * fragmentHeight;   // Y-координата (зависит от строки row)
 
                        try {
                            ctx.drawImage(
                                fragments[idx],
                                drawX,
                                drawY,
                                fragmentWidth,
                                fragmentHeight
                            );
                        } catch (e) {
                            console.error(`Ошибка при отрисовке фрагмента ${idx} на странице ${i + 1}:`, e);
                            return;
                        }
                    }
                    // 3. Создание и добавление собранного изображения
                    const assembledImg = new Image();
                    assembledImg.src = canvas.toDataURL();
                    assembledImg.style.display = 'block';
                    assembledImg.style.margin = '20px 0';
 
                    divResult.appendChild(assembledImg);
 
                    console.log(`Страница ${i + 1} успешно собрана (${totalWidth}x${totalHeight}).`);
                } catch (err) {
                    console.warn (err.message)
                }
 
                }
            } else {
                console.error("Не найдены необходимые DOM-элементы.");
            }
        });
    </script>
</body>
 
</html>

@kidASM · 08.12.2025, 20:35

Promise.all будет ждать только декодирования, но не обязательно полной загрузки. А если какая-то картинки будет загружаться медленно?
П.С. У меня не было задачи написать рабочую тулзу, а просто привести пример.

@voraa · 08.12.2025, 20:54

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

Promise.all будет ждать только декодирования, но не обязательно полной загрузки

Так декодирования невозможно без загрузки. Что декодировать, если не загружено? После декодирования становятся доступны все параметры картинки - размеры и битовое представление, что бы грузить его в канвас. Отображение не особо интересует. Хотя если картинка декодирована, то она отобразится на следующем рендеринге экрана.

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

У меня не было задачи написать рабочую тулзу, а просто привести пример.

Ну было написано про игры с ИИ. Вот и показалось странным, что он это не сделал. Как бы стандартный прием.

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

А если какая-то картинки будет загружаться медленно?

Ну значит будет ждать. Если надо и 10 сек будет ждать, а не вылетит через 3 сек. Ускорить то ничто не в состоянии. А если все загружается быстрее, то не будет ждать 3 сек, а отработает быстрее.

@kidASM · 08.12.2025, 22:27

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

Так декодирования невозможно без загрузки.

То есть, всегда на 100% гарантировано что на запрос будет полный и целостный ответ?

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

А если все загружается быстрее, то не будет ждать 3 сек, а отработает быстрее.

При использовании Promise.all(), до первой ошибки. И в таком случае, все просимы rejected.
Если очень хочется использовать промисы, тогда уж лучше использовать Promise.allSettled(). Хоть загруженные картинки отрисуются, а не всё отмениться.

@voraa · 08.12.2025, 22:37

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

То есть, всегда на 100% гарантировано что на запрос будет полный и целостный ответ?

img.decode() возвращает промис, который резолвится, когда картинка загружена и раскодирована (есть вся информация - размеры, битовая карта) и реджектится, если картинка не загружена (ошибка сети, нет такого файла и проч) или не раскодирована (неверный формат)

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

При использовании Promise.all(), до первой ошибки. И в таком случае, все просимы rejected.

Ну да. В вашем примере так же было. Если хоть один фрагмент не загружен, то вся страница с этими фрагментами не показывается. В принципе можно и по другому делать - показывать страницу без незагруженных фрагментов. Я же тоже просто ваш пример переделал, что бы показать, что можно не ждать фиксированное время, а грузить по времени столько, сколько требуется.

@kidASM · 08.12.2025, 22:52

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

Ну да. В вашем примере так же было.

Эммм, я дико извиняюсь, а где в моём коде промисы?
Сам же писал что у меня setTimeout().

@voraa · 08.12.2025, 22:53

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

тогда уж лучше использовать Promise.allSettled().

Да не обязательно.
Второй пример, где я жду не загрузки всех картинок, а каждой последовательно можно поправить, что бы не выводить не загружающиеся

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
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
<!doctype html>
<html>
 
<head>
    <style>
        .well-flex {
            display: none;
        }
 
        #myCanvas {
            display: hidden;
        }
    </style>
</head>
 
<body>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/002n">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/000n">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28512/001/002/003">
    </div>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/002n">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/002n">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28513/001/002/003">
    </div>
    <div class="well-flex">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/000n">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/000/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/001n">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/002">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/001/003">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/000">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/001">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/002n">
        <img crossOrigin="anonymous" src="https://www.zr.ru/archive/image/tile/1/741/23688/28514/001/002/003">
    </div>
    <div id="result"></div>
    <script>
        document.addEventListener('DOMContentLoaded', async function () {
            const pageContainers = document.querySelectorAll(".well-flex");
            const divResult = document.getElementById("result");
            //const canvas = document.getElementById("myCanvas");
            const canvas = document.createElement('canvas');
 
            if (divResult && pageContainers.length > 0 && canvas) {
                const ctx = canvas.getContext("2d");
 
                // Новые параметры сетки: 3 столбца (COLUMNS) и 4 строки (ROWS)
                const COLUMNS = 3;
                const ROWS = 4; // Теперь 4 строки по вертикали
 
                for (let i = 0; i < pageContainers.length; i++) {
                    const container = pageContainers[i];
                    const fragments = container.querySelectorAll('img');
                    const totalFragments = fragments.length;
 
 
                    //                    if (totalFragments !== COLUMNS * ROWS || fragments[0].naturalWidth === 0) {
                    //                        console.warn(`Пропускаем страницу ${i + 1}. Ожидалось ${COLUMNS * ROWS}, получено ${totalFragments}. Изображения еще не загружены или их количество неверно.`);
                    //                        continue;
                    //                   }
                    // Размеры одного фрагмента (натуральные размеры после загрузки)
 
                    let fragmentWidth, fragmentHeight, totalWidth, totalHeight;
                    let hasImgProp = false;
                    // 2. Коррекlet idx
                    try {
                        for (let idx = 0; idx < totalFragments; idx++) {
                            const frag = fragments[idx];
                            try {
                                await frag.decode();
                                if (!hasImgProp) {
                                    fragmentWidth = frag.naturalWidth;
                                    fragmentHeight = frag.naturalHeight;
 
                                    // 1. Корректный расчет общего размера холста
                                    totalWidth = COLUMNS * fragmentWidth; // 3 * Ширина_фрагмента
                                    totalHeight = ROWS * fragmentHeight;   // 4 * Высота_фрагмента
 
                                    // Устанавливаем размеры холста
                                    ctx.canvas.width = totalWidth;
                                    ctx.canvas.height = totalHeight;
                                    ctx.clearRect(0, 0, totalWidth, totalHeight); // Очищаем холст
                                    hasImgProp = true;
                                }
 
                                // Расчет столбца (k): 0-3 => 0; 4-7 => 1; 8-11 => 2
                                const col = Math.floor(idx / ROWS);
 
                                // Расчет строки (l): 0, 4, 8 => 0; 1, 5, 9 => 1; и т.д.
                                const row = idx % ROWS;
 
                                // Координаты для отрисовки
                                const drawX = col * fragmentWidth;    // X-координата (зависит от столбца col)
                                const drawY = row * fragmentHeight;   // Y-координата (зависит от строки row)
 
                                try {
                                    ctx.drawImage(
                                        fragments[idx],
                                        drawX,
                                        drawY,
                                        fragmentWidth,
                                        fragmentHeight
                                    );
                                } catch (e) {
                                    console.error(`Ошибка при отрисовке фрагмента ${idx} на странице ${i + 1}:`, e);
                                }
                            } catch (e) {
                                console.log(`На странице ${i + 1} ошибка загрузки фрагмента ${idx + 1}`);
                            }
 
                        }
                        // 3. Создание и добавление собранного изображения
                        const assembledImg = new Image();
                        assembledImg.src = canvas.toDataURL();
                        assembledImg.style.display = 'block';
                        assembledImg.style.margin = '20px 0';
 
                        divResult.appendChild(assembledImg);
 
                        console.log(`Страница ${i + 1} успешно собрана (${totalWidth}x${totalHeight}).`);
                    } catch (err) {
                        console.warn(err.message);
                    }
 
                }
            } else {
                console.error("Не найдены необходимые DOM-элементы.");
            }
        });
    </script>
</body>
 
</html>

@kidASM · 08.12.2025, 22:59

Чем это всё поможет ТС?

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@supmener 87 / 95 / 15 Регистрация: 26.06.2013 Сообщений: 4,750

	Как найти ссылки на исходные изображения? 07.12.2025, 13:57. Показов 517. Ответов 16 Метки нет (Все метки) Здесь 3 страницы статьи https://www.zr.ru/archive/zr/1... lomaiutsia Как, используя например DevTools, увидеть ссылки на исходные изображения, чтобы сохранить их на ПК? 0

@voraa 1220 / 1105 / 173 Регистрация: 21.01.2024 Сообщений: 5,061
	07.12.2025, 20:57
	Там изображение склеено из многих маленьких картинок. Ну надо просто уметь работать в devtools. Открываете вкладку Elements и просто ищите нужный. Ведете мышью по элементам на devtools, выбранный на странице выделяется голубым. Если он закрыт, открываете его.... Как то так это выглядит (Хрень какая то. Делаю снимок экрана, а форум говорит, что этот файл .png не является изображением) 1

@supmener 87 / 95 / 15 Регистрация: 26.06.2013 Сообщений: 4,750
	07.12.2025, 21:16 [ТС]
	А при этом на другой панели, где: Styles, Computed, Layout что должно быть открыто, какая вкладка? 0

@kidASM 409 / 301 / 112 Регистрация: 28.08.2013 Сообщений: 787
	08.12.2025, 20:35
	Promise.all будет ждать только декодирования, но не обязательно полной загрузки. А если какая-то картинки будет загружаться медленно? П.С. У меня не было задачи написать рабочую тулзу, а просто привести пример. 0

@kidASM 409 / 301 / 112 Регистрация: 28.08.2013 Сообщений: 787
	08.12.2025, 22:59
	Чем это всё поможет ТС? 0