Vue獲取圖片MD5的方法詳解
背景
計算圖片的MD5可以將其作為圖片的唯一標識，從而優(yōu)化對圖片的存儲和檢索效率，還可以對圖片進行有效的去重。
名詞解釋
哈希函數(shù)
哈希函數(shù)是一種數(shù)學函數(shù)，也稱散列函數(shù)。它接受任意長度的輸入，并可以將其轉換為固定長度的隨機字母和數(shù)字組成的字符串。由此函數(shù)計算的值具有不可逆性，即不能通過逆向演算回原本的數(shù)值，可以有效用于加密。
MD5
MD5是一種廣泛使用的哈希函數(shù)，MD5算法會將圖片/文件的二進制數(shù)據(jù)作為輸入，計算出一個128位的哈希值，可以用于校驗文件的完整性和唯一性。
MD5工具--spark-md5
安裝：npm install --save spark-md5
如果使用typeScript需要繼續(xù)安裝對應的類型：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);
};
};
運行結果：
獲取支持跨域的網絡圖片的MD5
fetch獲取
首先使用fetch API獲取圖片，然后將其轉換為blob對象。然后，我們使用FileReader的readAsArrayBuffer方法將blob轉換為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);
};
運行結果：
Image對象獲取
此方法需要將Image復制到canvas上面進行canvas.toDataURL()，此處涉及到<img>標簽的特性：
一般情況下，<img>進行圖片加載是不會發(fā)送網絡請求的，出于安全考慮，沒有通過CORS授權獲取的圖像是不允許在canvas中使用的。
因此需要在<img>標簽上加上crossOrigin屬性
更多屬性相關內容可查看該鏈接：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上的內容轉換為一個數(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ù)轉換為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);
};
};
// 方法調用：要保證圖片已經加載完 可以使用setTimeout或者nextTick setTimeout(() => getFileMd5(), 0);
獲取不支持跨域的網絡圖片的MD5
此情況建議由服務端進行圖片md5的計算
服務端設置響應頭
需要服務端設置響應頭 Access-Control-Allow-Origin: *
通過node轉發(fā)獲取
待補充
到此這篇關于Vue獲取圖片MD5的方法詳解的文章就介紹到這了,更多相關Vue獲取圖片MD5內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在平常的項目中,echarts圖表我們也是使用的非常多的,通常我們從后端拿到數(shù)據(jù),需要在圖表上動態(tài)的進行呈現(xiàn),接下來我們就模擬從后端獲取數(shù)據(jù)然后進行呈現(xiàn)的方法，這篇文章主要介紹了Vue echarts封裝組件需求分析與實現(xiàn)2022-10-10
這篇文章主要介紹了vue如何實現(xiàn)點擊空白區(qū)域關閉彈窗問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3使用別名報錯問題的解決辦法(vetur插件報錯問題)
最近在寫一個購物網站使用vue,使用中遇到了問題,下面這篇文章主要給大家介紹了關于vue3使用別名報錯問題的解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vue實現(xiàn)雙token無感刷新,雙token機制,尤其是指在OAuth 2.0授權協(xié)議中廣泛使用的access token（訪問令牌）和refresh token（刷新令牌）組合,文中通過代碼示例講解的非常詳細,需要的朋友可以參考下2024-03-03
在Vue3中,推薦使用::deep作為深度選擇器,它比Vue2中的::v-deep語法更簡潔,::v-deep、::deep、:deep()、>>>和/deep/都是用于穿透組件作用域的選擇器,但Vue3更傾向于使用::deep或:deep(),感興趣的朋友跟隨小編一起看看吧2024-10-10
在Vue Element的table組件中插入超鏈接,可以使用<el-link>標簽替代傳統(tǒng)的<a>標簽,實現(xiàn)更加整潔的UI設計,具體操作是替換原有的<span>標簽,直接使用<el-link>進行超鏈接的插入,使得鏈接樣式與Element UI保持一致2024-09-09
這篇文章主要介紹了淺談關于vue中scss公用的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-12-12
這篇文章主要為大家詳細介紹了vue移動端下拉刷新和上滑加載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
Vue+jsPlumb實現(xiàn)連線效果(支持滑動連線和點擊連線)
jsPlumb 是一個比較強大的繪圖組件，它提供了一種方法，主要用于連接網頁上的元素。本文將利用jsPlumb實現(xiàn)連線效果，同時支持滑動連線和點擊連線，感興趣的可以了解一下2023-01-01
詳解vue中父子組件傳遞參數(shù)props的實現(xiàn)方式
這篇文章主要給大家介紹了在vue中，父子組件傳遞參數(shù)?props?實現(xiàn)方式，文章通過代碼示例介紹的非常詳細，對我們的學習或工作有一定的參考價值,需要的朋友可以參考下2023-07-07