javascript - 如何将参数传递给内置函数的回调？ (即 HTMLCanvasElement.toBlob)

Question

我想对生成的 Blob 进行检查，这需要我将自己的变量传递给回调。然而，toBlob() only passes the Blob 。如何将我自己的变量传递给回调？或者，是否有更好的方法来完成此任务，而不涉及将参数传递给回调？

尝试.bind后，我无法让它工作:

  function handleCanvas(canvas, inputImage, file, quality, resolutionMultiplier) {
    console.log(quality);
    canvas.toBlob(processImage.bind(null, inputImage, file, quality, resolutionMultiplier), "image/jpeg", Math.max(quality, 1) / 100)
  }

  function processImage(newBlob, inputImage, file, quality, resolutionMultiplier) {
    console.log(quality);
  }

打印出:

72
0.5

但它们都应该是 72。由于 resolutionMultiplier 是 0.5，所以所有参数似乎都向左移动了 1。我想要从 toBlob 获取的 Blob 根本没有传递到 processImage 中。

最终编辑:找到了解决方案，比我想象的要简单得多:

  function handleCanvas(canvas, inputImage, file, quality, resolutionMultiplier) {
    canvas.toBlob(function (newBlob) {
      processImage(newBlob, inputImage, file, quality, resolutionMultiplier);
    }, "image/jpeg", Math.max(quality, 1) / 100)
  }

Answer 1

您的用例并不完全清楚您的问题，但一般来说您只需通过闭包传递自定义变量即可:

var oldSize = ...;

function callback(blob) {
    if (blob.size < oldSize) {
        // take appropriate action
    }
}

canvas.toBlob(callback);

另一种方法可能是将 oldSize 绑定(bind)为参数:

function callback(oldSize, blob) {
    // ...
}

var oldSize = ...;

canvas.toBlob(callback.bind(null, oldSize));