哈希函数(信息摘要)

本工具整合了两种最常用的哈希函数。

sha256比md5的安全性更高，但性能略低。

如果是计算大文件，不管是使用md5还是sha256，都推荐在Web Worker中执行他们。

MD5

用于获取信息或者文件的摘要数据。

API

import { MD5 } from 'cat-kit/crypto'

MD5('你好').then(md5 => {
  console.log(md5)
})

MD5(file, {
  // 默认尺寸
  chunkSize: 2 * 1024 * 1024,
  // 进度回调
  onProgress(p) {}
})

示例

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869

<template>
  <div>
    <div>字符串：</div>
    <textarea v-model="text" placeholder="原文"> </textarea>
    <div>
      <v-button @click="handleCalcStringMD5">计算</v-button>
      结果: {{ textMd5 }}
    </div>

    <div>文件：</div>
    <input type="file" @change="handleCalcFileMD5" />
    <div>
      读取第{{ number }}片 进度: {{ progress }} 结果: {{ fileMd5 }} 耗时：{{
        usedTime
      }}ms
    </div>
  </div>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { MD5 } from '@cat-kit/crypto'
import MD5Worker from './md5.worker?worker'

const text = shallowRef('')
const textMd5 = shallowRef('')

const handleCalcStringMD5 = async () => {
  textMd5.value = await MD5(text.value)
}

const fileMd5 = shallowRef('')
const progress = shallowRef(0)
const number = shallowRef(0)
const usedTime = shallowRef<number>()

let start = 0
const worker = new MD5Worker()

worker.onmessage = e => {
  if (e.data.event === 'progress') {
    progress.value = e.data.data
    number.value += 1
  } else {
    fileMd5.value = e.data.data
    usedTime.value = Date.now() - start
  }
}
const handleCalcFileMD5 = async (e: Event) => {
  const target = e.target as HTMLInputElement
  const file = target.files![0]
  if (!file) return
  start = Date.now()
  worker.postMessage(file)


  // 在读取文件的过程中，可以监听进度
  // MD5(file, {
  //   onProgress(p) {
  //     progress.value = p
  //     number.value += 1
  //   }
  // }).then(md5 => {
  //   fileMd5.value = md5
  //   usedTime.value = Date.now() - start
  // })
}
</script>

SHA256

用于获取信息或者文件的摘要数据，比md5更加安全

API

import { SHA256 } from 'cat-kit/crypto'

SHA256('你好').then(hex => {
  console.log(hex)
})

SHA256(file, {
  // 默认尺寸
  chunkSize: 2 * 1024 * 1024,
  // 进度回调
  onProgress(p) {}
})

示例

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566

<template>
  <div>
    <div>字符串：</div>
    <textarea v-model="text" placeholder="原文"> </textarea>
    <div>
      <v-button @click="handleCalcStringMD5">计算</v-button>
      结果: {{ textMd5 }}
    </div>

    <div>文件：</div>
    <input type="file" @change="handleCalcFileMD5" />
    <div>
      读取第{{ number }}片 进度: {{ progress }} 结果: {{ fileMd5 }} 耗时：{{
        usedTime
      }}ms
    </div>
  </div>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { SHA256 } from '@cat-kit/crypto'

const text = shallowRef('')
const textMd5 = shallowRef('')

const handleCalcStringMD5 = async () => {
  textMd5.value = await SHA256(text.value)
}

const fileMd5 = shallowRef('')
const progress = shallowRef(0)
const number = shallowRef(0)
const usedTime = shallowRef<number>()

let start = 0
// const worker = new MD5Worker()

// worker.onmessage = e => {
//   if (e.data.event === 'progress') {
//     progress.value = e.data.data
//     number.value += 1
//   } else {
//     fileMd5.value = e.data.data
//     usedTime.value = Date.now() - start
//   }
// }
const handleCalcFileMD5 = async (e: Event) => {
  const target = e.target as HTMLInputElement
  const file = target.files![0]
  if (!file) return
  start = Date.now()

  // 在读取文件的过程中，可以监听进度
  SHA256(file, {
    onProgress(p) {
      progress.value = p
      number.value += 1
    }
  }).then(md5 => {
    fileMd5.value = md5
    usedTime.value = Date.now() - start
  })
}
</script>