非阻塞图像处理的正确实现：回调转async/await的疑问

问题背景 #

我开发了一个JavaScript扩展，核心功能是在用户触发操作时将图片转换为dataURI并进行后续处理。当前面临两个核心问题：

• 当需要添加缩放、修改等更多图像处理操作时，回调嵌套过深，代码难以维护，希望改用线性写法。
• 考虑用await image.decode()替代image.onload回调，但不确定这样是否真的是非阻塞的，会不会影响页面加载；另外是否应该直接用Promise来封装？

原回调式代码 #

function getImageDataURL(imageSource, callback){
  let image = new Image();
  let cans = document.createElement('canvas');
  
  image.onload = function() {
    // 图像处理逻辑
    cans.width = this.naturalWidth;
    cans.height = this.naturalHeight;
    cans.getContext('2d').drawImage(this, 0,0);
    let q = 1
    while (cans.toDataURL("image/webp", q).length > 7500 && q != 0) {
      q -= 0.05; // 调整质量步长
    }
    callback(cans.toDataURL("image/webp", q));
    cans.remove(); // 处理完成后移除元素
  }
  image.src = imageSource;
}

尝试的异步函数改造 #

我尝试改成以下异步函数，测试表现一致，但不确定实际是否真的非阻塞：

async function asyncGetImageDataUrl(source) {
   ...
   image.src = source
   await image.decode()

   ... 
   return dataURI
}

最终疑问：调用result = await asyncGetImage(src)会不会在某些场景下变成阻塞？

补充嵌套场景示例 #

当前回调嵌套导致代码混乱：

source = getImageSource(..)
if (source == foo) {
   doThis()
}
getImageURL(source, (result) => {
   if (result.length < max) {
      store(result)
   }
   else {
      moreImageProcessing(result, (processedResult) => {
         ...
      }
   }
}

解答 #

1. await image.decode() 确实是非阻塞的 #

JavaScript的await只会暂停当前异步函数的执行，不会阻塞整个主线程。当你调用await image.decode()时，浏览器会继续处理其他任务（比如页面渲染、用户交互），直到图片解码完成，才会回到异步函数中继续执行后续代码。

它和image.onload的异步本质完全一致：图片的加载和解码都是浏览器在后台完成的，await只是让代码写法更线性，不会影响页面响应。

2. 用Async/Await重构图片处理函数 #

直接把原函数改造成异步函数，彻底摆脱回调嵌套：

async function asyncGetImageDataUrl(source) {
  const image = new Image();
  const canvas = document.createElement('canvas');
  
  // 若需加载跨域图片，需设置跨域属性
  image.crossOrigin = 'anonymous';
  
  // 触发图片加载
  image.src = source;
  
  // 等待图片解码完成（确保绘制无延迟）
  await image.decode();
  
  // 执行图像处理逻辑
  canvas.width = image.naturalWidth;
  canvas.height = image.naturalHeight;
  const ctx = canvas.getContext('2d');
  ctx.drawImage(image, 0, 0);
  
  // 调整质量直到dataURI长度符合要求
  let quality = 1;
  let dataURI;
  do {
    dataURI = canvas.toDataURL("image/webp", quality);
    quality -= 0.05;
  } while (dataURI.length > 7500 && quality > 0);
  
  // 清理canvas元素
  canvas.remove();
  
  return dataURI;
}

3. 重构调用代码，消除嵌套 #

改造后的函数可以用await实现线性写法，彻底解决回调地狱问题：

// 注意：调用await的函数必须标记为async
async function handleImage() {
  const source = getImageSource(..);
  if (source === foo) {
    doThis();
  }
  
  try {
    const result = await asyncGetImageDataUrl(source);
    if (result.length < max) {
      store(result);
    } else {
      // 若moreImageProcessing是回调式，先封装为Promise
      const processedResult = await moreImageProcessingAsync(result);
      // 后续处理逻辑...
    }
  } catch (err) {
    // 捕获图片加载、解码或处理失败的错误
    console.error('图片处理失败:', err);
  }
}

// 将回调式的moreImageProcessing封装为Promise
function moreImageProcessingAsync(result) {
  return new Promise((resolve, reject) => {
    moreImageProcessing(result, (processedResult) => {
      resolve(processedResult);
      // 如有错误场景，需调用reject(err)
    });
  });
}

关键注意事项 #

• await必须在async标记的函数内使用，外层调用函数需要添加async关键字。
• 必须添加try/catch错误处理：图片加载、解码可能失败，异步函数的错误会转化为Promise的reject，需要主动捕获避免程序崩溃。
• image.decode() vs image.onload：decode()会等待图片完全解码完成（确保绘制到canvas时不会出现延迟），而onload仅标记图片资源加载完成，可能还未完成解码。decode()更适合canvas绘制场景，能避免潜在的绘制异常。

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