Vue獲取圖片MD5的方法詳解
背景
計算圖片的MD5可以將其作為圖片的唯一標識，從而優(yōu)化對圖片的存儲和檢索效率，還可以對圖片進行有效的去重。
名詞解釋
哈希函數(shù)
哈希函數(shù)是一種數(shù)學函數(shù)，也稱散列函數(shù)。它接受任意長度的輸入，并可以將其轉(zhuǎn)換為固定長度的隨機字母和數(shù)字組成的字符串。由此函數(shù)計算的值具有不可逆性，即不能通過逆向演算回原本的數(shù)值，可以有效用于加密。
MD5
MD5是一種廣泛使用的哈希函數(shù)，MD5算法會將圖片/文件的二進制數(shù)據(jù)作為輸入，計算出一個128位的哈希值，可以用于校驗文件的完整性和唯一性。
MD5工具--spark-md5
安裝：npm install --save spark-md5
如果使用typeScript需要繼續(xù)安裝對應(yīng)的類型：npm install --save @types/spark-md5
使用import SparkMD5 from 'spark-md5';
獲取本地上傳圖片的MD5
計算MD5，重要的是獲取文件的二進制數(shù)據(jù)
如果你使用的是原生的<input type="file">，則需要在change事件中找到e.target.files[0]文件
如果使用的是UI組件庫，則一般獲取file.raw
<input type="file" @change="changeFile" />
const changeFile = (e) => {
const file = e.target.files[0];
const fileReader = new FileReader();
const spark = new SparkMD5.ArrayBuffer();
fileReader.readAsArrayBuffer(file);
fileReader.onload = (f) => {
spark.append(f.target.result);
const md5 = spark.end();
console.log('md5', md5);
};
};
運行結(jié)果：
獲取支持跨域的網(wǎng)絡(luò)圖片的MD5
fetch獲取
首先使用fetch API獲取圖片，然后將其轉(zhuǎn)換為blob對象。然后，我們使用FileReader的readAsArrayBuffer方法將blob轉(zhuǎn)換為ArrayBuffer
const getFileMd5 = () => {
const fileReader = new FileReader();
const spark = new SparkMD5.ArrayBuffer();
// 圖片url 圖片來源必須支持跨域
fetch('https://picsum.photos/536/354')
.then((response) => response.blob())
.then((blob) => {
fileReader.readAsArrayBuffer(blob);
fileReader.onload = (e) => {
spark.append(e.target?.result as ArrayBuffer);
const md5 = spark.end();
console.log('md5', md5);
};
})
.catch(console.error);
};
運行結(jié)果：
Image對象獲取
此方法需要將Image復制到canvas上面進行canvas.toDataURL()，此處涉及到<img>標簽的特性：
一般情況下，<img>進行圖片加載是不會發(fā)送網(wǎng)絡(luò)請求的，出于安全考慮，沒有通過CORS授權(quán)獲取的圖像是不允許在canvas中使用的。
因此需要在<img>標簽上加上crossOrigin屬性
更多屬性相關(guān)內(nèi)容可查看該鏈接：developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img
<img class="testImg" src="https://picsum.photos/536/354" crossOrigin="anonymous" />
const getFileMd5 = () => {
// 找到圖片對象
const image = document.querySelectorAll('.testImg')[0] as HTMLImageElement;
// 將canvas上的內(nèi)容轉(zhuǎn)換為一個數(shù)據(jù)URL，該URL代表了canvas 的像素數(shù)據(jù)
const canvas = document.createElement('canvas');
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext('2d');
ctx?.drawImage(image, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL();
// 將dataUrl數(shù)據(jù)轉(zhuǎn)換為blob
const arr = dataURL.split(',');
const mimeList = arr[0].match(/:(.*?);/);
if (!mimeList || !mimeList.length) return;
const mime = mimeList[1];
const bstr = atob(arr[1]);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
const blob = new Blob([u8arr], { type: mime });
// 計算md5
const fileReader = new FileReader();
const spark = new SparkMD5.ArrayBuffer();
fileReader.readAsArrayBuffer(blob);
fileReader.onload = (e) => {
spark.append(e.target?.result as ArrayBuffer);
const md5 = spark.end();
console.log('md5', md5);
};
};
// 方法調(diào)用：要保證圖片已經(jīng)加載完 可以使用setTimeout或者nextTick setTimeout(() => getFileMd5(), 0);
獲取不支持跨域的網(wǎng)絡(luò)圖片的MD5
此情況建議由服務(wù)端進行圖片md5的計算
服務(wù)端設(shè)置響應(yīng)頭
需要服務(wù)端設(shè)置響應(yīng)頭 Access-Control-Allow-Origin: *
通過node轉(zhuǎn)發(fā)獲取
待補充
到此這篇關(guān)于Vue獲取圖片MD5的方法詳解的文章就介紹到這了,更多相關(guān)Vue獲取圖片MD5內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
利用Vue模擬實現(xiàn)element-ui的分頁器效果
這篇文章主要為大家詳細介紹了如何利用Vue模擬實現(xiàn)element-ui的分頁器效果，文中的示例代碼講解詳細，感興趣的小伙伴可以動手嘗試一下2022-11-11
ElementUI?select彈窗在特定場合錯位問題解決方案
這篇文章主要介紹了ElementUI?select彈窗在特定場合錯位問題解決方案,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-02-02
VUE數(shù)組根據(jù)索引刪除數(shù)據(jù),頁面同時更新的實現(xiàn)方法
這篇文章主要介紹了VUE數(shù)組根據(jù)索引刪除數(shù)據(jù),頁面同時更新的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
驗證碼功能在我們的身邊用處極廣，今天小編給大家分享基于vue實現(xiàn)隨機驗證碼功能,感興趣的朋友跟隨小編一起看看吧2019-12-12
typescript 為 javaScript的超集，這意味著它支持所有都JavaScript都語法。這篇文章主要介紹了vue框架中props的typescript用法,需要的朋友可以參考下2020-02-02
這篇文章主要為大家介紹了vue與ant-tree結(jié)合偽造懶加載并可以查詢實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
示例vue 的keep-alive緩存功能的實現(xiàn)
這篇文章主要介紹了示例vue 的keep-alive緩存功能的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文深入探討了Vue3中新特性shallowReactive的使用和原理,shallowReactive是創(chuàng)建淺響應(yīng)式對象的API,只對對象的第一層屬性進行響應(yīng)式轉(zhuǎn)換,不對嵌套對象處理,有助于性能優(yōu)化和狀態(tài)管理,同時也指出了shallowReactive在使用中的注意事項2024-10-10
vue3中template使用ref無需.value原因解析
vue3的template中使用ref變量無需使用.value,還可以在事件處理器中進行賦值操作時,無需使用.value就可以直接修改ref變量的值,這篇文章主要介紹了原來vue3中template使用ref無需.value是因為這個,需要的朋友可以參考下2024-06-06