/
757.nako3
407 lines (394 loc) · 17.7 KB
/
757.nako3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
### [作品情報]
### 掲載URL=https://n3s.nadesi.com/id.php?757
### タイトル=PNGファイルの内容(メタデータ)表示
### 作者=てぃふと@うぇいく(user_id=2)
### ライセンス=CC0
### 説明=PNGファイルを選択するかドロップすると、PNGファイル内にある各チャンクの情報を表示します。みたいチャンクが「内容未対応」と表示されたけどやっぱり内容知りたいという場合、連絡貰えれば対応します。
### 対象バージョン=3.2.27
### URL=
### 種類=wnako
### タグ=
### 更新日時=2021-10-15 21:19:38
###
!「https://n3s.nadesi.com/plain/752.js」を取り込む
ファイル枠＝ファイル枠作成には(対象ファイル)
対象ファイルを"ArrayBuffer"でファイル読込完了時には(ar)
P＝arをPNG読み込み
＃ Pを表示
PのPNG内容表示
ここまで
ここまで
●(PNGの)PNG内容表示
アニメーション含はオフ
カラータイプは0
(PNGからPNGチャンク配列取得)を反復
チャンク＝それ
チャンク["chunkType"]で条件分岐
「IHDR」ならば、
カラータイプはチャンク["colorType"]
ここまで
「acTL」ならば、
アニメーション含はオン
ここまで
ここまで
ここまで
TBL＝「TABLE」のDOM要素作成
TBLに{"border-collapse":"collapse"}をDOMスタイル一括設定
THEAD＝「THEAD」のDOM要素作成
TBODY＝「TBODY」のDOM要素作成
TBLにTHEADをDOM子要素追加
TBLにTBODYをDOM子要素追加
TR＝「TR」のDOM要素作成
ヘッダ部＝「<th colspan="3">基本情報</th>」
もし、アニメーション含ならば、
ヘッダ部＝「{ヘッダ部}<th colspan="7">アニメーション情報</th>」
ここまで
ヘッダ部＝「{ヘッダ部}<th>補足情報</th>」
TRにヘッダ部をDOM_HTML設定
THEADにTRをDOM子要素追加
TR＝「TR」のDOM要素作成
ヘッダ部＝「<th>No</th><th>種類</th><th>長さ</th>」
もし、アニメーション含ならば、
ヘッダ部＝「{ヘッダ部}<th>連番</th><th>フレーム番号</th>」
ヘッダ部＝「{ヘッダ部}<th>位置</th><th>サイズ</th><th>表示時間</th><th>描き方</th><th>消え方</th>」
ここまで
ヘッダ部＝「{ヘッダ部}<th>内容</th>」
TRにヘッダ部をDOM_HTML設定
THEADにTRをDOM子要素追加
チャンク番号＝１
フレーム番号＝０
(PNGからPNGチャンク配列取得)を反復
チャンク＝それ
TR＝「TR」のDOM要素作成
// 全チャンク共通の基本的な情報について表示を行う
TD＝「TD」のDOM要素作成
TDにチャンク番号をDOMテキスト設定
TDに{"text-align":"right"}をDOMスタイル一括設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TDにチャンク["chunkType"]をDOMテキスト設定
TDに{"text-align":"left"}をDOMスタイル一括設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TDにチャンク["chunkLength"]をDOMテキスト設定
TDに{"text-align":"right"}をDOMスタイル一括設定
TRにTDをDOM子要素追加
// アニメーションに関する情報について表示を行う
もし、アニメーション含ならば、
チャンク["chunkType"]で条件分岐
「IDAT」ならば、
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
もし、フレーム番号＞０ならば、
TDにフレーム番号をDOMテキスト設定
TDに{"text-align":"right"}をDOMスタイル一括設定
ここまで
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
ここまで
「fcTL」ならば、
フレーム番号＝フレーム番号＋１
TD＝「TD」のDOM要素作成
TDにチャンク["sequence_number"]をDOMテキスト設定
TDに{"text-align":"right"}をDOMスタイル一括設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TDにフレーム番号をDOMテキスト設定
TDに{"text-align":"right"}をDOMスタイル一括設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TDに{"text-align":"left"}をDOMスタイル一括設定
TDに「{チャンク["x_offset"]},{チャンク["y_offset"]}」をDOMテキスト設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TDに{"text-align":"left"}をDOMスタイル一括設定
TDに「{チャンク["width"]},{チャンク["height"]}」をDOMテキスト設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TDに{"text-align":"right"}をDOMスタイル一括設定
ワーク＝チャンク["delay_den"]
もし、ワーク＝0ならば、ワーク＝100
TDに「{チャンク["delay_num"]}/{ワーク}秒」をDOMテキスト設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TDに{"text-align":"left"}をDOMスタイル一括設定
チャンク["blend_op"]で条件分岐
0ならば、
ワーク＝「置き換え」
ここまで
1ならば、
ワーク＝「透過合成」
ここまで
違えば、
ワーク＝「不明({チャンク["blend_op"]})」
ここまで
ここまで
TDにワークをDOMテキスト設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TDに{"text-align":"left"}をDOMスタイル一括設定
チャンク["dispose_op"]で条件分岐
0ならば、
ワーク＝「消さない」
ここまで
1ならば、
ワーク＝「透明黒で塗る」
ここまで
2ならば、
ワーク＝「元に戻す」
ここまで
違えば、
ワーク＝「不明({チャンク["dispose_op"]})」
ここまで
ここまで
TDにワークをDOMテキスト設定
TRにTDをDOM子要素追加
ここまで
「fdAT」ならば、
TD＝「TD」のDOM要素作成
TDにチャンク["sequence_number"]をDOMテキスト設定
TDに{"text-align":"right"}をDOMスタイル一括設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TDにフレーム番号をDOMテキスト設定
TDに{"text-align":"right"}をDOMスタイル一括設定
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
ここまで
違えば、
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
TD＝「TD」のDOM要素作成
TRにTDをDOM子要素追加
ここまで
ここまで
ここまで
// 内容について表示を行う
TD＝「TD」のDOM要素作成
チャンク["chunkType"]で条件分岐
「IHDR」ならば、
ワーク＝「サイズ:{チャンク["width"]}x{チャンク["height"]}<br>画像形式:{チャンク["bitDepth"]}bit 」
チャンク["colorType"]で条件分岐
0ならば、
ワーク＝「{ワーク}グレイスケール<br>」
ここまで
2ならば、
ワーク＝「{ワーク}フルカラー<br>」
ここまで
3ならば、
ワーク＝「{ワーク}パレット(8bitフルカラー)<br>」
ここまで
4ならば、
ワーク＝「{ワーク}グレイスケール＋透過情報<br>」
ここまで
6ならば、
ワーク＝「{ワーク}フルカラー＋透過情報<br>」
ここまで
違えば、
ワーク＝「{ワーク}？？？({チャンク["colorType"]})<br>」
ここまで
ここまで
もし、チャンク["compression"]≠0ならば、
ワーク＝「{ワーク}圧縮方法:不明({チャンク["compression"]})<br>」
ここまで
もし、チャンク["filter"]≠0ならば、
ワーク＝「{ワーク}フィルタ:不明({チャンク["filter"]})<br>」
ここまで
チャンク["interlace"]で条件分岐
0ならば、
ワーク＝「{ワーク}インタレース:なし」
ここまで
1ならば、
ワーク＝「{ワーク}インタレース:Adam7」
ここまで
違えば、
ワーク＝「{ワーク}インタレース:不明({チャンク["interlace"]})」
ここまで
ここまで
TDにワークをDOM_HTML設定
ここまで
「IDAT」ならば、
もし、アニメーション含ならば、
もし、フレーム番号＞０ならば、
TDに「フレーム画像」をDOMテキスト設定
違えば、
TDに「代替画像」をDOMテキスト設定
ここまで
違えば、
TDに「画像データ」をDOMテキスト設定
ここまで
// チャンク["chunkRaw"]のPNGInflate
ここまで
「PLTE」ならば、
TDに「パラーパレット:{チャンク["palette"]["length"]}色」をDOMテキスト設定
ここまで
「IEND」ならば、
TDに「終端」をDOMテキスト設定
ここまで
「tRNS」ならば、
カラータイプで条件分岐
0ならば、
TDに「透過色:{チャンク["alphas"]}」をDOMテキスト設定
ここまで
2ならば、
TDに「透過色:{チャンク["alphas"][0]},{チャンク["alphas"][1]},{チャンク["alphas"][2]}」をDOMテキスト設定
ここまで
3ならば、
TDに「透過情報付パレット:{チャンク["alphas"]["length"]}色」をDOMテキスト設定
ここまで
ここまで
ここまで
「tEXt」ならば、
TDに「{チャンク["key"]}:{チャンク["text"]}」をDOMテキスト設定
ここまで
「pHYs」ならば、
もし、チャンク["unit"]＝0ならば、
TDに「アスペクト比:X:Y=({チャンク["pixelDimensionsX"]}:{チャンク["pixelDimensionsY"]})」をDOMテキスト設定
違えば、
ワーク＝「単位不明」
もし、チャンク["unit"]＝1ならば、ワーク＝「メートル」
TDに「物理サイズ:({チャンク["pixelDimensionsX"]}x{チャンク["pixelDimensionsY"]})Pixel/{ワーク}」をDOMテキスト設定
ここまで
ここまで
「gAMA」ならば、
TDに「ガンマ比:{チャンク["gamma"]}」をDOMテキスト設定
ここまで
「sRGB」ならば、
ワーク＝「不明」
チャンク["renderingIntent"]で条件分岐
0ならば、
ワーク＝「Perceptual」
ここまで
1ならば、
ワーク＝「相対colorimetric」
ここまで
2ならば、
ワーク＝「Saturation」
ここまで
3ならば、
ワーク＝「絶対colorimetric」
ここまで
ここまで
TDに「色空間:standard RGB<br>プロファイル:{ワーク}」をDOMテキスト設定
ここまで
「acTL」ならば、
ワーク＝チャンク["num_plays"]
もし、ワーク＝０ならば、ワーク＝「無限」
TDに「総フレーム数:{チャンク["num_frames"]}<br>再生回数:{ワーク}」をDOM_HTML設定
ここまで
「fcTL」ならば、
TDに「フレーム情報」をDOMテキスト設定
ここまで
「fdAT」ならば、
TDに「フレーム画像」をDOMテキスト設定
ここまで
違えば、
TDに「内容未対応」をDOMテキスト設定
ここまで
ここまで
TDに{"text-align":"left","vertical-align":"top"}をDOMスタイル一括設定
TRにTDをDOM子要素追加
TBODYにTRをDOM子要素追加
チャンク番号＝チャンク番号＋１
ここまで
TBLにTBODYをDOM子要素追加
(TBLの「TD,TH」をDOM子要素全取得)を反復する
それに{ボーダー:"1px #000000 solid"}をDOMスタイル一括設定
ここまで
TBLをDOM親要素にDOM子要素追加
ここまで
ファイル枠をDOM親要素にDOM子要素追加
●(CALLBACKを)ファイル枠作成
ファイル選択時＝CALLBACK
枠＝"DIV"をDOM要素作成
ファイル選択＝"INPUT"をDOM要素作成
枠にファイル選択をDOM子要素追加
ファイル選択["type"]＝"file"
ドラッグ中処理＝枠で引数付ソレには(枠)
EVT＝WINDOW["event"]
EVTの"stopPropagation"を[]でJSメソッド実行
EVTの"preventDefault"を[]でJSメソッド実行
枠の「背景色」へ「#e1e7f0」をDOMスタイル設定
ここまで
ドラッグ離処理＝枠で引数付ソレには(枠)
EVT＝WINDOW["event"]
EVTの"stopPropagation"を[]でJSメソッド実行
EVTの"preventDefault"を[]でJSメソッド実行
枠の「背景色」へ「#ffffff」をDOMスタイル設定
ここまで
ファイル選択処理＝[ファイル選択,CALLBACK]で引数付ソレには(OBJ)
ファイル選択＝OBJ[0]
ファイル選択時＝OBJ[1]
対象ファイル＝ファイル選択["files"][0]
ファイル選択時(対象ファイル)
ここまで
ドロップ処理＝[枠,ファイル選択,ファイル選択処理]で引数付ソレには(OBJ)
枠＝OBJ[0]
ファイル選択＝OBJ[1]
ファイル選択処理＝OBJ[2]
EVT＝WINDOW["event"]
EVTの"stopPropagation"を[]でJSメソッド実行
EVTの"preventDefault"を[]でJSメソッド実行
ファイル選択["files"]＝EVT["dataTransfer"]["files"]
対象ファイル＝ファイル選択["files"][0]
ファイル選択処理()
枠の「背景色」へ「#ffffff」をDOMスタイル設定
ここまで
枠の"dragover"にドラッグ中処理をDOMイベント追加
枠の"dragleave"にドラッグ離処理をDOMイベント追加
枠の"drop"にドロップ処理をDOMイベント追加
ファイル選択の"change"にファイル選択処理をDOMイベント追加
枠で戻る
ここまで
●(FUNCを)ソレ
FUNCで戻る
ここまで
●(FUNCをARGSで)引数付ソレ
『(function(func,preargs){return function(...args){return func(preargs,args)}})』を[FUNC,ARGS]でJS関数実行で戻る
ここまで
●(callbackにfileをtypeで)ファイル読込完了時
『(function(file,type,callback){
const fr=new FileReader();
fr.onload=()=>{
callback(fr.result);
fr.onload=null;
}
if (type==='DataURL'){
fr.readAsDataURL(file);
}else
if (type==='ArrayBuffer'){
fr.readAsArrayBuffer(file);
}else{
throw new Error('invalid type');
}
})』を[file,type,callback]でJS関数実行
ここまで