<template>
  <div id="app">
    <h1>PNGを分解する</h1>
    <input type="file" accept="image/png" name="pngImg" id="pngImg" @change="pngCheck">
    <div class="result">
      <dl class="result_signature">
        <dt>シグネチャ</dt>
        <dd>
          <span v-for="item in signature" :key="`signature-${item}`">
            {{item}},
          </span>
        </dd>
      </dl>
      <dl class="result_idat">
        <dt>IDAT</dt>
        <dd>
          <span v-for="item in IDAT" :key="`idat-${item}`">
            {{item}},
          </span>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  const signature = ref([])
  const IDAT = ref([])
  
  const pngCheck = (e) => {
    const pngImg = e.target.files[0]
    const fileReader = new FileReader()
    let decodeData
    fileReader.addEventListener('load', () => {
      decodeData = fileReader.result
      
      const uint8 = new Uint8Array(decodeData)
      signature.value = uint8.slice(0, 8)
      
      const getChunkData = (chunkName) => {
        const chunkNameArr = []
        for (let i in chunkName){          
          // チャンク名をASCIIに変換
          chunkNameArr.push(chunkName.charCodeAt(i))
        }
        // バイナリからチャンク名の位置を探す
        const cIndex = uint8.findIndex((item, index, arr) => {
          if(item === chunkNameArr[0] && arr[index + 1] === chunkNameArr[1] && arr[index + 2] === chunkNameArr[2] && arr[index + 3] === chunkNameArr[3]) return true
        })
        if (cIndex === -1) return []
        // 取得した位置の手前4バイトがlengthなので、このデータを取得する
        const cLengthArr = uint8.slice(cIndex - 4, cIndex)
        // この4バイトをそれぞれ2進数に変換して結合する
        let cLengthStr = ''
        for (let item of cLengthArr) {
          cLengthStr += item.toString(2)
        }
        // 2進数の文字列を10進数の数値に変換＝lengthで示されたバイト数
        const cLength = parseInt(cLengthStr, 2)
        // lengthで示されたバイト数分のdataを取る
        const cData = uint8.slice(cIndex + 4, cIndex + 4 + cLength)
        // CRCを取る
        const cCrc = uint8.slice(cIndex + 4 + cLength, cIndex + 4 + cLength + 4)
        // 開始点からデータ長（4）、チャンク名（4）、データ（可変）、CRC（4）までのバイナリを返す
        const targetChunkData = uint8.slice(cIndex - 4, (cIndex - 4) + cLength + 12)
        return targetChunkData
      }
      
      IDAT.value = getChunkData('IDAT')
    })
    fileReader.readAsArrayBuffer(pngImg)
  }
</script>

<style lang="scss">
</style>