如何将参数传递给内置函数的回调？（即 HTMLCanvasElement.toBlob）答案

【问题标题】：How to pass a parameter to a built-in function's callback? (i.e. HTMLCanvasElement.toBlob)如何将参数传递给内置函数的回调？（即 HTMLCanvasElement.toBlob）
【发布时间】：2016-08-09 23:25:06
【问题描述】：

我想对生成的 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)
  }

【问题讨论】：

您如何使用toBlob()？另一个变量是什么？
我想这取决于？您是否希望它只是一个 polyfill，从第一个条件看起来就是这样，如果是这样，它不应该与您正在填充的本机方法一致吗？如果您想检查某些内容，只需在回调中执行即可？
@MattWay 另一个变量是原始 jpeg 的文件大小。我用它来比较 Blob 是否更小。
@adeneo 必须和native方法一致。如果没有，那么这将简单得多。如果我没有传入像 uuid 这样的参考值，我怎么知道在回调中检查哪个变量？
请添加一些代码来展示您如何尝试使用 toBlob，包括您的文件大小变量。或者您希望它如何工作。

标签： javascript parameter-passing

【解决方案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));

【讨论】：

嘿，抱歉 [暂时] 收回复选标记，但是当我以这种方式使用 .bind 时，它不起作用。我已经用详细信息更新了原始问题，你能看一下吗？
您期望 bind 将参数绑定到参数列表的末尾。相反，它绑定到参数列表的开头，因此 newBlob 需要是函数的 last 参数。请参阅上面的示例。

【解决方案2】：

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

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

改成

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

【讨论】：

但是很遗憾我无法更改浏览器的原生功能。