0

I'm creating a blob from a canvas and can only return an undefined variable with the following:

function resample(canvas, width, height) {

    var resizer = sizeo();
    var datablob;
    
    var canvasResampled = document.createElement('canvas');
    canvasResampled.width = width;
    canvasResampled.height = height;

    resizer.resize(canvas, canvasResampled)
    .then(result => resizer.toBlob(result, 'image/jpeg', 75))
    .then(blob => datablob = blob);
    console.log(datablob);

    return datablob;
}

As mentioned, the console shows undefined. If I run a console.log in the format of:

then(blob => console.log(blob));

instead of trying set the datablob variable, I get told there's an image/jpeg there, which is what I'm intending. I'm fresh-faced to es6 and fat arrows so I've likely overlooked something.

Edit:

If the value is undefined because promises are asynchronous, how can I perform the same task? As in, how do I return datablob with a ready value? I can't return from within the then statements, obviously, but I'm unsure about how to unsure the return value of the function waits.

As I see it now, if it involves creating some separate callback, is my use of then and fat arrow not as convenient for this situation as I blindly walked into? I was finding it quite convenient to tell javascript that when x is ready, do the following with x and it only feels natural that I can end with when z is ready, return z as the return value of the function but it looks like this last request is not as elegant to pull off as the previous statements?

Community
  • 1
  • 1
biscuitstack
  • 11,591
  • 1
  • 26
  • 41
  • What is "*ec6*"? – Bergi Aug 12 '17 at 13:34
  • 1
    Promises are asynchronous. It's impossible to immediately return a value. – Bergi Aug 12 '17 at 13:35
  • I suspect you're being disingenuous in your question, I've corrected the typo. Thanks. – biscuitstack Aug 12 '17 at 13:38
  • I'm just curious why this typo is so common. `s` and `c` are not even close on a keyboard. :-D – Bergi Aug 12 '17 at 14:00
  • 1
    Regarding your edit: It's impossible to pull off "*when z is ready, return z as the return value of the function*". All this "when it is ready" actually means "do something later" (specifically, execute the callback function). It doesn't affect what will happen *right now*. And no, you cannot wait (block) for something to be ready, you have to `return` something right now. So just return the promise you got, and continue with the "when resampling is ready" story at the caller. – Bergi Aug 12 '17 at 14:03
  • Thanks. Looks like my question is likely a duplicate of the one you posted. Am studying it now, though I have no control over the `resizer.resize `function so the *ES2015+: Promises with then()* example doesn't look immediately obvious. Will continue reading. Regarding *ec6* typo, e and c are the first two letters of ecma so it's likely the reason for how common the typo is. – biscuitstack Aug 12 '17 at 14:08
  • 1
    You don't need control over `resizer.resize` - it's already returning a promise, and that's good. Don't wrap your own `new Promise` around it, just treat it like the `delay` or `ajax` functions in the example in that answer. – Bergi Aug 12 '17 at 14:10

0 Answers0