Javascript转换为未定义的blob [重复]

Question

当我尝试将画布转换为 blob 时，我的值未定义。我在下面有这段代码可以正常工作，但是当我尝试将下面的控制台日志移动到函数时，它给了我未定义的结果。

这是工作代码：

    const handleSave = (params) => {
    
    let previewUrl;
    previewCanvasRef.current.toBlob(
      (blob) => {
        previewUrl = window.URL.createObjectURL(blob);
        console.log(previewUrl);                  
      },
      'image/png',
      1
    );
}

当我尝试在下面创建控制台日志时。那么它给了我一个无敌的价值：

const handleSave = (params) => {
    
    let previewUrl;
    previewCanvasRef.current.toBlob(
      (blob) => {
        previewUrl = window.URL.createObjectURL(blob);
        
      },
      'image/png',
      1
    );

    console.log(previewUrl);
}

这是我尝试过的但错误：

const handleSave = (params) => {
    
    let previewUrl;
    previewCanvasRef.current.toBlob(
      async (blob) => {
        previewUrl = window.URL.createObjectURL(blob);        
      },
      'image/png',
      1
    ).then((res) => console.log(res));  
}

Answer 1

这是您正在寻找的将其转换为异步函数的语法：

const canvasToBlob = () => new Promise((resolve, reject) => {
  previewCanvasRef.current.toBlob(resolve, 'image/png', 1);
});

const handleSave = async () => {
  const blob = await canvasToBlob();
  const previewURL = URL.createObjectURL(blob);
}

因为async/await 只是包装 Promises 的语法糖，如果你想用传统的回调函数创建自己的 async 函数，你需要手动使用 Promises（因为你可以't return 从toBlob 的回调内退出canvasToBlob 函数，因为这将简单地返回toBlob 方法）。

所以，在这里，我们只是告诉toBlob 使用resolve 作为它的回调：Promise 的resolve(arg) 等价于async 函数的return arg（而reject(err) 等价于throw err） .在这种情况下，传递给toBlob 回调的Blob 是arg。我们现在可以将此函数与async/await 语法糖一起使用。

请记住，当您使用异步函数时，您的 整个 链需要处于 async 模式：依赖此 blob 的每个函数都需要用async/await 语法或.then'd 包装——因为同步函数不能依赖异步值。在现实世界中，这意味着你必须记住将你的函数定义为async。

This page from MDN将为您提供一些关于JS中异步函数的更详细的阅读。

Answer 2

处理异步的最简单方法是使用 Promises

const handleSave = (params) =>
  new Promise((resolve) =>
    previewCanvasRef.current.toBlob(
      (blob) => resolve(window.URL.createObjectURL(blob)),
      "image/png",
      1
    )
  );

像这样使用它

handleSave(......).then(blob => {
  // do things here
});

或使用 async/await - 必须在异步函数中才能这样做

async function () {
  const blob = await handleSave(.....);
  // do things with blob
}