画布到边缘上的斑点答案

【问题标题】：Canvas to blob on Edge画布到边缘上的斑点
【发布时间】：2018-05-08 14:36:48
【问题描述】：

尝试将 Html 画布元素转换为 blob 时，Microsoft Edge 浏览器出现异常。在普通浏览器上一切正常。例外：

SCRIPT438：对象不支持属性或方法“toBlob”

HTML sn-p:

<canvas id="cnv" width="640px" height="520px" style="display: none"></canvas>

Javascript：

var files[];
var canvas = document.getElementById('cnv');
canvas.toBlob(function (blob) {            
        files.push(blob);
         }
    }, 'image/jpeg', 1);

当我调用toBlob 方法时，我得到了这个异常。有什么方法可以教 Edge blob 转换吗？我正在使用：

Microsoft Edge 41.16299.15.0

【问题讨论】：

标签： javascript html html5-canvas blob microsoft-edge

【解决方案1】：

from here 采用的这个小 polyfill 必须帮助 see jsfiddle

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'} ) );
       });
     }
  });
}

这也有帮助github.com/blueimp/JavaScript-Canvas-to-Blob

【讨论】：

【解决方案2】：

如果你使用 webpack 和 ES6 那么install the package via npm

npm install blueimp-canvas-to-blob

然后像这样导入包

import "blueimp-canvas-to-blob/js/canvas-to-blob";

【讨论】：