画像の限界解像度 vue js

要件: システムはシステム ロゴをカスタマイズする必要があり、解像度が制限されていないと見苦しくなります。そのため、解像度に応じて画像を送信してください。

達成

ラッパー関数:

//限制图片尺寸
const limitFileWH = (E_width: Number, E_height: Number, file: any) => {
  let _this = this;
  let imgWidth = 0;
  let imgHeight = 0;
  const isSize = new Promise(function (resolve, reject) {
    let width = E_width;
    let height = E_height;
    let _URL = window.URL || window.webkitURL;
    let img = new Image();
    img.onload = function () {
      imgWidth = img.width;
      imgHeight = img.height;
      let valid = img.width == width && img.height == height;
      valid ? resolve() : reject();
    }
    img.src = _URL.createObjectURL(file);
  }).then(() => {
    if (imgHeight !== E_height && imgWidth !== E_width) {
      hlAlert("请上传jpg、jpeg、png格式的图片,分辨率限制为" + E_width + '*' + E_height);
      return false;
    } else {
      return true;
    }
  }, () => {
    hlAlert("请上传jpg、jpeg、png格式的图片,分辨率限制为" + E_width + '*' + E_height);
    return false;
  });
  return isSize;
}

呼び出し: (リクエストを開始するための解決策は正しいです) ここでは el-upload が使用されています。送信する前に確認してください

//el-upload上传图片检查
beforeAvatarUpload: async (file) => {
  //调用[限制图片尺寸]函数 这里限制图片为368*104
   let res = await hlLimitFileWH(368, 104, file);
   return res;
 }