▶ 実 行
▶ 実行
クリア
PNGファイルの内容(メタデータ)表示
by てぃふと@うぇいく
!「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子要素追加 チャンク番号=1 フレーム番号=0 (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要素作成 もし、フレーム番号>0ならば、 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」ならば、 フレーム番号=フレーム番号+1 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」ならば、 もし、アニメーション含ならば、 もし、フレーム番号>0ならば、 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"] もし、ワーク=0ならば、ワーク=「無限」 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子要素追加 チャンク番号=チャンク番号+1 ここまで 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関数実行 ここまで