Vue获取图片MD5的方法详解
作者：窗边的鬼
背景
计算图片的MD5可以将其作为图片的唯一标识，从而优化对图片的存储和检索效率，还可以对图片进行有效的去重。
名词解释
哈希函数
哈希函数是一种数学函数，也称散列函数。它接受任意长度的输入，并可以将其转换为固定长度的随机字母和数字组成的字符串。由此函数计算的值具有不可逆性，即不能通过逆向演算回原本的数值，可以有效用于加密。
MD5
MD5是一种广泛使用的哈希函数，MD5算法会将图片/文件的二进制数据作为输入，计算出一个128位的哈希值，可以用于校验文件的完整性和唯一性。
MD5工具--spark-md5
安装：npm install --save spark-md5
如果使用typeScript需要继续安装对应的类型：npm install --save @types/spark-md5
使用import SparkMD5 from 'spark-md5';
获取本地上传图片的MD5
计算MD5，重要的是获取文件的二进制数据
如果你使用的是原生的<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>进行图片加载是不会发送网络请求的，出于安全考虑，没有通过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上的内容转换为一个数据URL，该URL代表了canvas 的像素数据
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数据转换为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转发获取
待补充
到此这篇关于Vue获取图片MD5的方法详解的文章就介绍到这了,更多相关Vue获取图片MD5内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！