如何将参数传递给内置函数的回调？ （即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，所有参数似乎都会向左移动一个。我希望来自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绑定为参数：

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

var oldSize = ...;

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

Answer 2

你的回调只传递了新的Blob。

callback( new Blob( [arr], {type: type || 'image/png'} ) )

更改为

callback( new Blob( [arr], {type: type || 'image/png'} ), your_value )