crypto-js#
正しいです、上記は有道翻訳のスクリーンショットです。私たちが得る情報をより信頼性のあるものにするために、このライブラリは暗号化に使用されますが、紹介文によると、メンテナンスが停止していると言われていますが、それはフロントエンドプロジェクトでの使用には影響しませんので、学んでみることには悪いことはありません。
アプリケーションシナリオ#
画像が同じかどうかを判断する：これは私の最近の要件であり、この機会にファイルに関するいくつかの知識を学びました。以下に共有します。学ぶ前に、いくつかの概念を知っておくことが最善です。
FileReader とは何ですか
MD5（Message-Digest Algorithm 5）は広く使用されているハッシュ関数であり、128 ビット（16 バイト）のハッシュ値を生成することができます。通常、32 桁の 16 進数で表されます。MD5 の設計は、異なる入力データが異なるハッシュ値を生成し、理論的にはハッシュ値から元のデータを逆推定することはできないようにすることです。
ただし、MD5 アルゴリズムは、衝突（collision）の脆弱性が存在するため、暗号学的なアプリケーションでは安全ではないと考えられています。
SHA-256（Secure Hash Algorithm 256-bit）は、暗号学的ハッシュ関数であり、SHA-2（Secure Hash Algorithm 2）ハッシュ関数ファミリーの一部です。SHA-256 アルゴリズムは、任意の長さのデータブロックから固定長の出力値を計算することができます。通常、出力値は 256 ビット（32 バイト）です。
要するに、SHA-256 は安全で信頼性があり、広く使用されているハッシュアルゴリズムであり、データの完全性と一貫性を検証する効率的な方法を提供します。SHA-256 に関する詳細情報については、暗号学に関連する書籍を参照するか、この分野の専門家に相談することをお勧めします。
はい、これらの 3 つの概念は、同じ画像を判断するために私たちが知っておく必要があるものです。私たちが行うことは 3 つのステップに分けることができます：
- コントロールからファイル情報を取得する
- fileReader を使用してファイルを読み取り、ファイルバッファに変換する
- 暗号アルゴリズムを使用して、固定長の入力値を計算し、比較する
実践解析#
<script setup lang="ts">
import { ref } from 'vue'
import CryptoJS from 'crypto-js' //4.2.0
defineProps<{ msg: string }>()
const count = ref(0)
const file1 = ref()
const file2 = ref()
function onFileChange1(e:any) {
const files = e.target.files;
if (files && files.length) {
file1.value = files[0]
}
}
function onFileChange2(e:any) {
const files = e.target.files;
if (files && files.length) {
file2.value = files[0]
}
}
async function calculateFileHash(file:any) {
return new Promise((resolve, reject) => {
// ファイルのバッファを読み込む
const reader = new FileReader();
reader.onload = (e:any) => {
// ArrayBuffをWorkArrayに変換してからSHA256を計算する必要があります
const wa = CryptoJS.lib.WordArray.create(e.target.result);
resolve(CryptoJS.SHA256(wa).toString());
};
reader.onerror = error => reject(error);
reader.readAsArrayBuffer(file);
});
}
async function compareFiles() {
try {
const [file1r, file2r] = await Promise.all(
[file1.value,file2.value].map((file:any) => calculateFileHash(file))
);
console.log('%c [ file1r, file2r ]-39', 'font-size:13px; background:pink; color:#bf2c9f;', file1r == file2r)
} catch (error) {
console.error('ファイルのハッシュの計算中にエラーが発生しました:', error);
}
}
</script>
<template>
<h1>{{ msg }}</h1>
<input type="file" @change="onFileChange1" ref="fileInput" />
<input type="file" @change="onFileChange2" ref="fileInput" />
<button type="button" @click="count++">count is {{ count }}</button>
<button type="button" @click="compareFiles">比較</button>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>
const wa = CryptoJS.lib.WordArray.create(e.target.result);
CryptoJS.SHA256(wa).toString()
重要なのは、これらの 2 つのメソッドです。興味がある方は試してみてください。SHA256 を計算するためには、まず ArrayBuff を WorkArray に変換する必要があります。これは私個人の実践から得られたものです。サポートしていただきありがとうございます。