Javascript converting to blob undefined

Question

I am having an undefined value when I tried to convert my canvas to a blob. I have this code below which works fine, but when I tried to move the console log below to the function then it gives me undefined.

Here is the working code:

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

when I tried to make the console log below. then It gives me an undefiend value:

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

    console.log(previewUrl);
}

Here is what I've tried but error:

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

no, nothing is changing it back to undefined ... your second piece of code is logging previewUrl before it is being set - because ... asyncrhony — Jaromanda X, May 14 '21 at 05:21
First parameter to toBlob function is a callback. This will work in asynchronous way. In second case console will get logged immediately (before calling the callback) hence it will not work. — Pranav Kale, May 14 '21 at 05:25
how can i set it with the exact value? sorry for that. Im a beginner in js @JaromandaX — DarkVader191919, May 14 '21 at 05:25
you are setting it ... `previewUrl = window.URL.createObjectURL(blob);` ... you need to do whatever you need with it in that callback — Jaromanda X, May 14 '21 at 05:28
it is an async function - and you can't change it to sync - because time travel doesn't exist — Jaromanda X, May 14 '21 at 05:29
what async function? the callback is called back asynchronously — Jaromanda X, May 14 '21 at 05:32
does `previewCanvasRef.current.toBlob` function return a Promise? you can't just tack `.then` onto anything and expect it to work — Jaromanda X, May 14 '21 at 05:40

Jaromanda X · Answer 1 · 2021-05-14T06:09:23.273

1

Easiest way to handle asynchrony is with Promises

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

use it like

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

or using async/await - must be inside an async function to do so

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

edited May 14 '21 at 06:09

answered May 14 '21 at 05:32

Jaromanda X

53,868
5
73
87

hello I editted my question.. Can you please check my above code – DarkVader191919 May 14 '21 at 05:38
1

@DarkVader191919- You can't just tack `.then` on to any function and expect it to work - that's not how programming works - I've shown you in this answer how to do it – Jaromanda X May 14 '21 at 05:40
because i have another function to be executed inside the handleSave.. – DarkVader191919 May 14 '21 at 05:44
I want only the function inside to have the value that i want. then execute another function inside the handleSave – DarkVader191919 May 14 '21 at 05:45
const handleSave = (params) => { return new Promise(resolve => previewCanvasRef.current.toBlob((blob) => { resolve(window.URL.createObjectURL(blob)); }, 'image/png',1); } is error – DarkVader191919 May 14 '21 at 05:47
is error you way? what error is? – Jaromanda X May 14 '21 at 06:08
oh, yeah, had a `;` that shouldn't have been there - tidied up that function now – Jaromanda X May 14 '21 at 06:09

score 0 · Accepted Answer · answered May 14 '21 at 06:10

This is the syntax you're looking for to turn this into an asynchronous function:

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);
}

Because async/await is just syntax sugar for wrapping Promises, if you want to create your own async function out of a traditional callback-style function, you would need to use Promises manually (since you can't return to exit the canvasToBlob function from within the callback of toBlob, as that would simply return the toBlob method).

So, here, we simply tell toBlob to use resolve as its callback: a Promise's resolve(arg) is equivalent to an async function's return arg (and reject(err) is equivalent to throw err). In this case, the Blob being passed to the toBlob callback is arg. We can now use this function with async/await syntax sugar.

Just keep in mind that, when you're using asynchronous functions, your entire chain needs to be in async mode: every function down the line that depends on this blob will need to be either wrapped with async/await syntax or .then'd—because a synchronous function cannot depend on an asynchronous value. In the real world, all that means is that you gotta remember to define your functions as async.

This page from MDN will provide you with some more detailed readings on asynchronous functions in JS.

Javascript converting to blob undefined

2 Answers2