Canvas.toBlob polyfill not working with createObjectURL in Chrome

Question

My application requires manipulation and temporary storage of many large images. To effectively manage this, we use blob URL links for all images.

However, after the manipulations, we obviously need to create a new Blob URL for the generated client-side generated image taken from the canvas.

Firefox has support for the native Canvas.toBlob() , which works fine, we then create a new url blob link from this blob as follows:

  var url = window.URL || window.webkitURL; var bloburl = url.createObjectURL(blob); 

For all browsers, we use the following polyfill:

https://github.com/blueimp/JavaScript-Canvas-to-Blob

This works for IE and Opera, but does not work on Chrome, where the following javascript error message is returned:

 Uncaught Error: Syntax error, unrecognized expression: blob:http%3A//www.exampledomain.com/d4693a94-ebf9-4608-b721-1cee1a04fd00 

When I console.log() bloburl variable, I get the following:

In Firefox / IE / Opera:

 blob:d4693a94-ebf9-4608-b721-1cee1a04fd00 

In Chrome:

 blob:http%3A//www.exampledomain.com/d4693a94-ebf9-4608-b721-1cee1a04fd00 

Something seems to get wrong when creating this URL link, but I don't know how to fix it.

Any help would be greatly appreciated.