web-dev-qa-db-fra.com

Toile à blob sur Edge

Obtention d'une exception sur le navigateur Microsoft Edge lors de la tentative de conversion d'un élément de canevas HTML en objet blob. Tout fonctionne très bien sur les navigateurs normaux. Exception:

SCRIPT438: l'objet ne prend pas en charge la propriété ou la méthode 'toBlob'

Extrait 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);

J'obtiens cette exception dès que j'appelle la méthode toBlob. Existe-t-il des moyens d'enseigner la conversion des objets blob Edge? J'utilise :

Microsoft Edge 41.16299.15.0

javascripthtmlhtml5-canvasblobmicrosoft-edge
11
uvytautas

Ce petit polyfill pris d'ici doit aider voir 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'} ) );
       });
     }
  });
}

Cela pourrait également aider github.com/blueimp/JavaScript-Canvas-to-Blob

18
isAlex