web-dev-qa-db-ja.com

Edgeのblobへのキャンバス

Html canvas要素をblobに変換しようとすると、Microsoft Edgeブラウザで例外が発生します。すべてが通常のブラウザでうまく動作します。例外：

SCRIPT438：オブジェクトはプロパティまたはメソッド 'toBlob'をサポートしていません

HTMLスニペット：

<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

javascripthtmlhtml5-canvasblobmicrosoft-edge
11
uvytautas

この小さなポリフィルを取りました ここから 役立つはず 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

18
isAlex