低版本的 safari 兼容 canvas.toBlob 方法

需求

低版本的 safari 兼容 canvas.toBlob 方法

问题描述

canvas.toBlob is not a function. (In 'canvas.toBlob', 'canvas.toBlob' is undefined)

低版本的 safari 没有支持 canvas.toBlob 方法 需要使用其它代替方案

解决方案

使用 canvas.toDataURL 方法代替

if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function (callback, type, quality) {
      var dataURL = this.toDataURL(type, quality).split(',')[1];
      setTimeout(function() {

        var binStr = atob( dataURL ),
            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'} ) );

      });
    }
  });
}

参考文献

HTMLCanvasElement.toBlob()---MDN
相关问题
JavaScript-Canvas-to-Blob---github