Vue获取图片MD5的方法详解

<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);
  };
};

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);
};

<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);