javascript - HTML5 Canvas toDataURL() 阻止 JavaScript 调用？

Question

我正在使用 HTML5 Canvas 。我在 Canvas 元素中加载了一个大小为 7MB 的图像。在我的页面上，我有一个 ConvertImage 按钮:

var imageUrl;
$("#ConvertImage").click(function() {
  $("#Spinner").show();
  imageUrl = $("#canvas")[0].toDataURL("image/png;base64;");
});

Spinner 只是一个 gif 动画。事实证明，当我尝试在下一条语句中检索 imageUrl 时，Spinner 并未立即显示。如果没有第二个操作，微调器会立即显示。感觉是在toDataURL()操作完成后才显示spinner。

这很奇怪，因为 show() 函数在 toDataURL() 操作之前执行。

我该如何解决这个问题？

Answer 1

要更新微调器，请尝试修改代码以便创建额外的更新事件。

您可以使用 setTimeout 执行此操作:

$("#ConvertImage").click(function() {
  $("#Spinner").show();

  /// add an event to be executed in about 100ms
  setTimeout(function() {
      imageUrl = $("#canvas")[0].toDataURL();
      /// done, optionally call some other function...
  }, 100);

});

这将给 .show() 一些时间来完成并且 setTimeout 的事件将在它之后排队。

您可能需要/想要更改我在此处设置的值(100 毫秒)。

代码中还有一个错误，可能不会影响任何事情，但正确处理也无妨 -

toDataURL 的参数只能是图像类型，即。 image/png, image/jpeg, image/webp 等。base64 部分不应该存在(复制图像时可能出现了从现有数据 uri 中键入)。由于 PNG 是默认的，因此在任何情况下都无需指定它 - 只需使用:

var dataUri = myCanvas.toDataURL(); /// default is image/png, also when it cannot
                                    /// detect a supported type

或

var dataUri = myCanvas.toDataURL('image/png');
var dataUri = myCanvas.toDataURL('image/jpeg');

等等