Greifen Sie auf den Blob-Wert außerhalb der asynchronen Funktion canvas.ToBlob() zu

Question 1

Ich arbeite mit HTMLCanvas -Element, das das Blob-Objekt außerhalb von zurückgibt async toBlob() Funktion. Diese Funktion gibt keinen Ausgabewert zurück, also versuche ich, eine Variable außerhalb zu deklarieren und über den Befehl darauf zuzugreifen.

Wie kann ich verwenden JS Promise für dieses Szenario?

var myblob;
            canvas.toBlob(function(blob) {                         
                              myblob = blob;
                              console.log("inside " + myblob); // getting value after the console outside
                           })
 console.log( "outside " + myblob); // getting undefined

Question 2

const blob = await new Promise(resolve => canvasElem.toBlob(resolve));

Question 3

Sie können verwenden Promise Konstrukteur, pass Blob Instanz zu resolve()Zugriff Promise Wert bei .then()

function getCanvasBlob(canvas) {
  return new Promise(function(resolve, reject) {
    canvas.toBlob(function(blob) {
      resolve(blob)
    })
  })
}

var canvasBlob = getCanvasBlob(canvas);

canvasBlob.then(function(blob) {
  // do stuff with blob
}, function(err) {
  console.log(err)
});

Question 4

ICH HABE EINE ANDERE IDEE … ähnlich der als beste Idee markierten … das Problem mit dann ist, dass Sie sich innerhalb des Blocks befinden müssen, um das Ergebnis des Versprechens abzurufen. Jetzt unterstützt Javascript erwarten Ähnlich wie bei c# ist dies gut, weil Sie die Funktion ausführen und warten können, bis sie aufgelöst ist, dann erhalten Sie das Ergebnis in einer Variablen, die keiner Funktion zugeordnet ist, Beispiel:

/* basically we create a function that receives a canvas called mycanvas, then we tell the function to return a new Promise, this promise is "resolved" inside the .toBlob method which by default provides a Blob parameter. */

function getCanvasBlob(mycanvas) {
  return new Promise(function(resolve, reject) {
    mycanvas.toBlob((blob) => {
      resolve(blob)
    })
  })
}

var myblob;

try{
  myblob = await getCanvasBlob(CANVAS_FROM_SOMEWHERE);
}
catch (error){
  console.log(error);
}

/* There's no need to use try/catch, you could use it just like this */

var myblob = await getCanvasBlob(CANVAS_FROM_SOMEWHERE);

Da die Methode asynchron ist, dann() nicht ausgeführt oder aufgerufen wird, bis das Promise aufgelöst ist, wird alles außerhalb dieser Methode nicht über Änderungen benachrichtigt, bis es zu spät ist … Der Vorteil hier ist, dass unser Javascript nicht fortgesetzt wird, bis das Promise vollständig aufgelöst wurde.

ZUSÄTZLICHE INFORMATIONEN: Wenn Sie await aufrufen, muss die Methode, von der aus Sie diese Funktion aufrufen, als asynchron markiert sein, andernfalls wird ein Fehler angezeigt … sagen wir zum Beispiel, dies wird innerhalb eines Klicks auf eine Schaltfläche aufgerufen:

/* OBVIOUSLY this will throw an error because I don't have a real canvas...*/

$( document ).ready(function() {
    
    $('#mybutton').bind('click', async function(){
    
      //...more code...
      //...more code... until...
      
      var CANVAS_FROM_SOMEWHERE;
      
      var myblob = await getCanvasBlob(CANVAS_FROM_SOMEWHERE);
    
    });
    
});

function getCanvasBlob(mycanvas) {
  return new Promise(function(resolve, reject) {
    mycanvas.toBlob((blob) => {
      resolve(blob)
    })
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="mybutton">process my canvas!</button>