// 上傳圖片大小及格式限制
export function restrictionPic(file) {
  // 定義上傳圖片大小需小于2MB
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error("上傳頭像圖片大小不能超過(guò) 2MB!");
    return isLt2M;
  }
  // 定義上傳圖片格式，
  const types = ["image/jpg", "image/png"];
  const isType = types.includes(file.type);
  if (!isType) {
    ElMessage.error("上傳頭像圖片格式不正確！");
    return isType;
  }
}

//讀取文件的方法
const fileToDataURL = (file) => {
  return new Promise((resolve) => {
    const reader = new FileReader()
    reader.onloadend = (e) => resolve(e.target.result)
    reader.readAsDataURL(file)
  })
}

//文件轉(zhuǎn)成圖片流
const dataURLToImage = (dataURL) => {
  return new Promise((resolve) => {
    const img = new Image()
    img.onload = () => resolve(img)
    img.src = dataURL
  })
}

// 壓縮圖片函數(shù)，接收一個(gè)文件和壓縮質(zhì)量參數(shù)
export function compressPic(file, quality) {
  var qualitys = 0.52

  // 根據(jù)文件大小設(shè)置不同的默認(rèn)壓縮質(zhì)量
  if (parseInt((file.size / 1024).toFixed(2)) < 1024) {
    qualitys = 0.85
  }
  if (5 * 1024 < parseInt((file.size / 1024).toFixed(2))) {
    qualitys = 0.92
  }
  if (quality) qualitys = quality

  // 如果上傳的是多個(gè)文件，遞歸處理每個(gè)文件
  if (file[0]) {
    return Promise.all(Array.from(file).map(e => this.compressPic(e, qualitys)))
  } else {
    return new Promise((resolve) => {
      // 如果圖片大小小于300KB，直接返回原始圖片數(shù)據(jù)
      if ((file.size / 1024).toFixed(2) < 300) {
        resolve({
          file: file
        })
      } else {
        // 創(chuàng)建FileReader對(duì)象，異步讀取存儲(chǔ)在客戶端上的文件內(nèi)容
        const reader = new FileReader()
        // 讀取操作完成時(shí)觸發(fā)該事件，使用格式（必須將接收到的數(shù)據(jù)從onload發(fā)送到其他函數(shù)）：reader.onload = e => {}
        reader.onload = ({
          target: {
            result: src
          }
        }) => {
          //創(chuàng)建img元素
          const image = new Image()
          // 圖片加載完成后異步執(zhí)行，當(dāng)image的src發(fā)生改變，瀏覽器就會(huì)跑去加載這個(gè)src里的資源，這個(gè)操作是異步的。
          image.onload = async () => {
            // 創(chuàng)建一個(gè)新的畫布元素和上下文，用于繪制壓縮后的圖片
            const canvas = document.createElement('canvas')
            const context = canvas.getContext('2d')
            // 計(jì)算目標(biāo)圖片的寬度和高度，以適應(yīng)最大寬度和高度的要求
            var targetWidth = image.width
            var targetHeight = image.height
            var maxWidth = 800
            var maxHeight = 800
            // 縮放圖片尺寸以適應(yīng)最大寬度和高度
            if (targetWidth > maxWidth || targetHeight > maxHeight) {
              const scaleFactor = Math.min(maxWidth / targetWidth, maxHeight / targetHeight);
              targetWidth *= scaleFactor;
              targetHeight *= scaleFactor;
            }
            // 設(shè)置畫布的尺寸
            canvas.width = targetWidth
            canvas.height = targetHeight
            // 清空畫布并在畫布上繪制壓縮后的圖片
            context.clearRect(0, 0, targetWidth, targetHeight)
            context.drawImage(image, 0, 0, targetWidth, targetHeight)
            // 將壓縮后的圖片數(shù)據(jù)轉(zhuǎn)換為 data URI?？梢允褂?type 參數(shù)其類型，默認(rèn)為 PNG 格式。qualitys越小，文件體積越小
            const canvasURL = canvas.toDataURL(file.type, qualitys)
            // 解碼 data URI，獲取圖片的二進(jìn)制數(shù)據(jù)。atob：是ascii to binary，用于將ascii碼解析成binary數(shù)據(jù)，即Base64的解碼過(guò)程。
            const buffer = atob(canvasURL.split(',')[1])
            let length = buffer.length
            //創(chuàng)建一個(gè) Uint8Array 類型的向量，用于存儲(chǔ)圖片的二進(jìn)制數(shù)據(jù)
            const bufferArray = new Uint8Array(new ArrayBuffer(length))
            while (length--) {
              bufferArray[length] = buffer.charCodeAt(length)
            }
            // 創(chuàng)建一個(gè)壓縮后的文件對(duì)象
            const miniFile = new File([bufferArray], file.name, {
              type: file.type
            })

            // 解析壓縮后的文件對(duì)象
            resolve({
              file: miniFile,
              origin: file,
              beforeSrc: src,
              afterSrc: canvasURL,
              beforeKB: Number((file.size / 1024).toFixed(2)),
              afterKB: Number((miniFile.size / 1024).toFixed(2))
            })
          }
          // 設(shè)置圖片的 src，觸發(fā)圖片加載
          image.src = src
        }
        // 讀取文件內(nèi)容，并在讀取完成后觸發(fā) onload 事件
        reader.readAsDataURL(file)
      }
    })
  }
}