Question

我遇到一种情况，我正在放大画布并将缩放结果发送到Blob，此时我将Blob保存到用户的桌面。但是，我遇到了一些奇怪的事情，我为用户提供了2x-20x的乘法器列表。因此，如果用户选择20倍的画布尺寸，则设置如下：

canvas.width = canvas.width * 20;
canvas.height = canvas.height * 20;

如果画布的尺寸大约是宽度828，高度507，则可以正常工作。例如，如果画布较大，则说宽度为1918，高度为975，在画布上toBlob函数（而不是blob对象）的回调中得到的是空值。

我首先想到的是乘法之前的画布大小可能与此有关，如果画布较大，则乘数会使它太大而无法使用或达到某种效果。我做了一些谷歌搜索，看看toBlob函数的画布大小是否受到限制，但最终没有运气。

有人遇到这样的事情和/或解决方案是什么吗？

var callback = function(blob) {
  var url = URL.createObjectURL(blob);
  var anchor = $('#download-image')[0];
  $('#download-image').attr('href', url);
  $('#download-image').attr('download', 'image.png');
  anchor.click();
}

var downloadAtScale = function(scale, callback) {
  var canvas = $('canvas')[0],
  originalWidth = canvas.width,
  originalHeight = canvas.height,
  scaledWidth = (originalWidth * scale),
  scaledHeight = (originalHeight * scale);

  canvas.toBlob(function(blob) {
    callback(blob);
  });
}

downloadAtScale(4, callback);

HTML5 Canvas toBlob结果为null

0 个答案: