画布在边缘上斑点 [英] Canvas to blob on Edge

问题描述

尝试将Html画布元素转换为blob时在Microsoft Edge浏览器上获取异常。一切都适用于普通浏览器。
例外：

Getting exception on Microsoft Edge browser when trying to convert Html canvas element to blob. Everything works great on normal browsers. Exception:

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

SCRIPT438: Object doesn't support property or method 'toBlob'

Html代码段：

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

Javascript：

Javascript:

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

当我打电话给 toBlob 方法。有没有办法教Edge gb转换？
我正在使用：

I get this exception right when I call toBlob method. Are there any ways to teach Edge blob converting? I am using :

Microsoft Edge 41.16299.15.0

Microsoft Edge 41.16299.15.0

推荐答案

这个小的polyfill 从这里必须帮助查看jsfiddle

This small polyfill taken from here must help 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

这篇关于画布在边缘上斑点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！