图片缩放函数reader.onload未执行返回空值的修复咨询

你的函数返回空字符串且reader.onload没按预期优先执行，核心原因是FileReader的读取操作是异步的——当你调用reader.readAsDataURL(file)后，JavaScript不会等待读取完成，而是直接执行后面的return ""，导致异步回调还没触发，函数就已经返回了空值。另外你代码里的AjaxComplete()调用位置过于零散，很多时候会提前结束加载状态，也打乱了异步流程的节奏。

我们需要把函数改成异步模式，通过Promise来等待文件读取、图片加载和缩放完成，最终返回处理后的图片数据。修改后的代码如下：

function Ds_JsImgResize(Filereq, MaxWidth, MaxHeight) {
  // 返回Promise对象，让调用方可以等待异步操作完成
  return new Promise((resolve, reject) => {
    if (Filereq.files.length === 0) {
      AjaxComplete();
      reject(new Error("未选择任何文件"));
      return;
    }

    AjaxBegin();
    const file = Filereq.files[0];
    const file_type = file.type;

    if (!file_type || file_type.substr(0, 5) !== "image") {
      AjaxComplete();
      reject(new Error("选择的文件不是图片类型"));
      return;
    }

    const img = document.createElement("img");
    const reader = new FileReader();

    reader.onload = function(e) {
      img.src = e.target.result;
      img.onload = function(imageEvent) {
        let width = img.naturalWidth;
        let height = img.naturalHeight;

        // 执行图片缩放逻辑
        if (width > MaxWidth || height > MaxHeight) {
          const aspectRatio = width / height;
          const targetAspectRatio = MaxWidth / MaxHeight;

          if (aspectRatio > targetAspectRatio) {
            width = MaxWidth;
            height = MaxWidth / aspectRatio;
          } else {
            height = MaxHeight;
            width = MaxHeight * aspectRatio;
          }
        }

        // 绘制到Canvas并转换为DataURL
        const canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);
        
        const imageData = canvas.toDataURL("image/png");
        AjaxComplete();
        resolve(imageData); // 将处理好的图片数据返回给调用方
      };

      // 处理图片加载失败的情况
      img.onerror = function() {
        AjaxComplete();
        reject(new Error("图片加载失败"));
      };
    };

    // 处理FileReader读取失败的情况
    reader.onerror = function() {
      AjaxComplete();
      reject(new Error("文件读取失败"));
    };

    reader.readAsDataURL(file);
  });
}

• 用Promise封装异步流程：函数不再直接返回值，而是返回Promise对象，当异步操作完成（成功/失败）时，通过resolve/reject传递结果，确保reader.onload和img.onload的逻辑优先执行完毕。
• 调整AjaxComplete()调用时机：只在异步流程的最终节点（成功或失败）调用，避免提前结束加载状态。
• 补充错误处理：添加了文件读取失败、图片加载失败的异常回调，让流程更健壮。
• 简化缩放逻辑：优化了宽高计算的写法，让代码更易读。

因为现在函数返回Promise，你需要用async/await或者.then()来获取结果：

// 方式1：使用async/await（推荐，代码更简洁）
async function handleImageUpload() {
  const fileInput = document.getElementById("你的文件输入框ID");
  try {
    const resizedImage = await Ds_JsImgResize(fileInput, 300, 300);
    // 在这里使用处理后的图片数据，比如显示到页面或提交到服务器
    // $('#PicPic').attr('src', resizedImage);
    // DsformData.append('PicV', resizedImage);
    // Ds_IM_JsCallAjax_async(DsformData, 'LC_Prof_IM_JsSabt_AfterAjax');
  } catch (error) {
    console.error("图片缩放失败:", error);
  }
}

// 方式2：使用.then()链式调用
Ds_JsImgResize(fileInput, 300, 300)
  .then(resizedImage => {
    // 处理成功的结果
  })
  .catch(error => {
    console.error("图片缩放失败:", error);
  });

内容的提问来源于stack exchange，提问作者danielp