javascript - 如何创建包含canvas元素的promise

Question

我在将缩略图生成函数转换为 promise 时遇到一些问题。

我需要它，以便在生成缩略图后运行 Promise.all，目前缩略图是未定义的(这是有道理的，因为它需要首先生成)。

我不明白第一个 img.onload 部分，我的解决方法是将其设置在 $scope 上，我知道这是一种糟糕的传递数据的方式。

    var img = new Image;
    img.onload = resizeImage;
    img.src = $scope.imageData;

    function resizeImage() {
      var newDataUri = imageToDataUri(this, 100, 100);
      $scope.imageDataThumb = newDataUri;
      $scope.$apply();
    }
    function imageToDataUri(img, width, height) {
      // create an off-screen canvas
      var canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);
      var quality = 1.0;
      return canvas.toDataURL('image/jpeg', quality).split(",")[1];  // quality = [0.0, 1.0]
    }

    var imgGuid = factory.guid();

    //Save the image to storage
    console.log($scope.imageDataThumb);
    Promise.all([fireBaseService.postImageToStorage(imageData, "images", imgGuid), fireBaseService.postImageToStorage($scope.imageDataThumb, "images", "thumb_" + imgGuid)])
      .then(function (results) {
      //do stuff with results
      });

Answer 1

I need to have it so it runs the Promise.all once the thumbnail has been generated,

canvas 中的所有图像导出函数都不会返回 promise :

toDataURL()

DOMString = canvas.toDataURL(type, encoderOptions); // synchronous

toBlob()

void canvas.toBlob(callback, mimeType, qualityArgument); // asynchronous

唯一的方法是手动将函数包装到 Promise 中(尽管对于诸如 toDataURL() 这样的同步函数来说，这意义不大。如果您只生成缩略图，我建议您使用移动图像加载到 Promise 中，并且由于图像加载是异步的，因此这更有意义。):

function imageToDataUri(img, width, height) {
  return new Promise(function(success, reject) {
    // create an off-screen canvas
    var ctx = document.createElement('canvas').getContext("2d");
    ctx.canvas.width = width;
    ctx.canvas.height = height;
    ctx.drawImage(img, 0, 0, width, height);
    var quality = 1.0;
    setTimeout(function() {
      success(canvas.toDataURL('image/jpeg', quality).split(",")[1]);  //quality=[0.0,1.0]
    }, 4);  // make call async
  })
}

现在您可以将调用用作任何 promise :

var promise = imageToDataUri(img, width, height);
promise.then(function(str) { ... });

或

Promise.all([promise, promise2, ...])
  .then( ... );

还有一个小注意事项:通过将 header 与 data-uri 分离，它不再是 Data-URL，而只是 Base-64 编码的字符串 - 函数名称需要考虑的内容。