eligrey / canvas-toblob.js

A canvas.toBlob() implementation

Hi 👋, I'm Eli

• 🔭 I’m currently working on Transcend Consent Manager
• 🕊 I write open source software in my free time
• 💬 Ask me about web security

My Stats

Goals

• 🌎 Defeat my enemies
• 🧠 Live until the heat death of our local galactic group through brain scanning and simulation
• 🌌 Optimize galactic entropy to keep us all alive as long as possible

Enemies

☠️  Mortality    ◦    🤔  Ignorance    ◦    😡  Hate    ◦    😔  Ennui

canvas-toblob.js's Issues

UC browser doesn't support

Doesn't work in Firefox

In Firefox, canvas.toBlob() returns canvas.mozGetAsFile() instead of passing it to callback(). It also looks like callback() is passed an undefined value if there's no Uint8Array.

file input to indexedDB using canvas.toBlob()

Hello guys,
i think you guys can solve this
https://stackoverflow.com/q/59701300/8276993

Security issue on IE 10

from error log, IE pointing code this.msToBlob() as security issue.

filename?

I'm not sure if this is a issue per se, but I'm not seeing where to include / generate a filename? If I'm using this within a BB10 app to cache images in the app space will every image be called 'blob.png'?

IE9 doesn't support Uint8Array, then the callback function got "undefined"

Deprecated

In Chrome 21, I get the following warnings:

BlobBuilder is deprecated. Use "Blob" constructor instead.
ArrayBuffer values are deprecated in Blob Constructor. Use ArrayBufferView instead.

works good for ios,but not for android 4.0+

maybe a bug in android, but is there any work around?Thanks for the good tool

how to use in Angular2?

getting error on .toBlob

I am getting error "undefined is not a function" on .toBlob.

what are the possible solutions to resolve this?

canvas.toBlob() link broken in the readme

ERROR SecurityError on IE 11

I am getting ERROR SecurityError on IE 11.

Please suggest any solutions.

No package.json file

I need to get this package via npm, but It cannot download because there is no package.json file.

Don't use mozGetAsFile when quality is passed

mozGetAsFile doesn't accept a quality argument like toDataURI as a result the quality argument on toBlob won't have an effect on jpeg and webp images.

SecurityError in chrome.

I am using Chrome Version 44.0.2403.125 (64-bit) on OS X El Capitan

Executing .toBlob() results in following error:
Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

Safari Security error

Security issue error while running on safari

EXCEPTION : Uncaught(in promise) . SecurityError (DOM Exception 18) The operation is insecure
toDataURL(@ native code)

This is probably because the canvas.toDataURL raises a security issue in Safari

Add msToBlob support

IE10+ has canvas.msToBlob that canvas-toBlob.js could take advantage of. The method doesn't take a mimetype and instead always outputs a png. http://msdn.microsoft.com/en-us/library/ie/hh771732(v=vs.85).aspx

It appears easy to add. I'll submit a pull request in a moment.

Thanks for this project btw - very useful!

add bower install support

iPhone 12.1

I have a program that crops images and then saves them to a file. Everything was working but it seems the last update for the iPhone (12.1.2), it's acting up.

$('#image').cropper('getCroppedCanvas').toBlob(function (blob) { }

Using the above to convert a cropped image to blob, it seems to work on the first upload using an iPhone but after that, "blob" is always null and it fails. This seems to only be the case for high res images though. Everything seems to work fine with lower res, and it only seems to be a problem with iPhones using the new software update.