2

I am using the canvas.toBlob() function on an app. Works fine on firefox.

When using chromium, the function fails.

I've found this question: Which browsers (and versions) support the Canvas.toBlob method?

addressing this and asking for browser support for this function, but it's already quite dated.

What's the status today? Is chromium the only one or are other browsers still not supporting it?

But most importantly...is there any workaround I can use??? My client is using chromium to test the app...

Community
  • 1
  • 1
transient_loop
  • 5,984
  • 15
  • 58
  • 117

1 Answers1

1

Well, the toBlob() suffers support, still. The original assignee on Chromium appears to not be active and the issue doesn't seem to have been reassigned at the moment (see the link from the post).

The work-around is to use a polyfill/shim such as this one.

The code from the same link above lists this code (ref. entry #57, by Adria):

if( !HTMLCanvasElement.prototype.toBlob ) {
    Object.defineProperty( HTMLCanvasElement.prototype, 'toBlob', { 
        value: function( callback, type, quality ) {
            const bin = atob( this.toDataURL( type, quality ).split(',')[1] ),
                  len = bin.length,
                  len32 = len >> 2,
                  a8 = new Uint8Array( len ),
                  a32 = new Uint32Array( a8.buffer, 0, len32 );

            for( var i=0, j=0; i < len32; i++ ) {
                a32[i] = bin.charCodeAt(j++)  |
                    bin.charCodeAt(j++) << 8  |
                    bin.charCodeAt(j++) << 16 |
                    bin.charCodeAt(j++) << 24;
            }

            let tailLength = len & 3;

            while( tailLength-- ) {
                a8[ j ] = bin.charCodeAt(j++);
            }

            callback( new Blob( [a8], {'type': type || 'image/png'} ) );
        }
    });
}

(you may have to replace const and let with var in browsers not quite up to date with ECMAScript).