Canvas toBlob 在 Safari 中未被识别为函数

Question

我可以使用下面的代码在 Chrome 和 Firefox 中下载图像，但在 Safari 中会抛出此错误：

TypeError: 'undefined' is not a function（评估 'canvas.toBlob(blobCallback('wallpaperdeae'))'）

$("#save").click(function(){

   function blobCallback(iconName) {
        return function (b) {

            var a = document.getElementById('download');
            a.download = iconName + ".jpg";
            a.href = window.URL.createObjectURL(b);
        }
    }
    canvas.toBlob(blobCallback('wallpaperdeae'));

});

Answer 1

我认为 Safari 不支持 toBlob 方法：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibility

据此，它仅在 Chrome 50+ 和 Firefox 中可用（19+ 用于基本支持，25+ 用于图像质量参数），并在 IE 10 及更高版本中提供一些基本支持。

所以对 Safari 没有任何支持。

编辑：根据引用的 URL，2017 年 9 月 19 日发布的 Safari 11 中的 toBlob 方法添加了支持

Answer 2

有一个"low performance polyfill based on toDataURL" posted on MDN

if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function (callback, type, quality) {
      var canvas = this;
      setTimeout(function() {

        var binStr = atob( canvas.toDataURL(type, quality).split(',')[1] ),
            len = binStr.length,
            arr = new Uint8Array(len);

        for (var i = 0; i < len; i++ ) {
          arr[i] = binStr.charCodeAt(i);
        }

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

      });
    }
  });
}