[toBlob]Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

Question

I am new to using canvas operations in javascript and came across a functionality in my tool which converts HTML5Canvas to a Blob using the async function toBlob which uses callback as its first argument. Callback receives the converted blob value as input and can be used for further processing. However, for few random cases happening very rarely, the toBlob function is unable to convert to blob and the callback receives null as input. Find the code below

                           canvases.forEach(canvasObj => {
                                canvasObj.canvas.toBlob(blob => {
                                    const reader = new FileReader();
                                    reader.readAsDataURL(blob)
                                    reader.onload = function () {
                                        //process reader.result
                                    };
                                })
                            })

I am getting following exception in the above code for the failed cases

Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

I checked for resources and similar issues that can help me fix the issue but could not find much here. Can anyone help and let me know what are cases where the toBlob function will fail.

At the first glance, there's nothing wrong with your code, it should work... — FZs, Aug 04 '20 at 11:18
I tried a simple example for single canvas using your code and it worked for me (in chrome). Which browser are you using? Can u maybe create a runnable code (like in jsfiddle) demonstrating the problem? — Mako, Aug 04 '20 at 12:01
Note that there is 99% of chance that you do not need the FileReader at all here. If your `//process reader.result` is just to set that URL as the `src` of an `` ot the `href` of an ``, then use a `blob://` URL instead (`URL.createObjectURL( blob )`), if you are using this `data://` to POST it to your server, then POST directly the binary Blob to your server, not a 34% bigger string. — Kaiido, Aug 04 '20 at 12:50
@Mako won't be possible as it is not happening always. It might work for you and me but might not work for someone else using a low end system(possibly) where the blob conversion might not happen on certain image sizes. — Dheeraj Khathuria, Aug 04 '20 at 13:35
@Kaiido I am posting the reader.result to server as a draft so that when user comes back, he sees the same canvas state as the last time — Dheeraj Khathuria, Aug 04 '20 at 13:37
So you don't need the FileReader code, post the Blob directly as binary. Also, regarding your actual issue it's indeed that on too big canvases toBlob will return `null`. You can't do much about it, apart from limiting the size of the source canvas. — Kaiido, Aug 04 '20 at 13:56
@Kaiido I added a logger to see the details of the canvas when toBlob is returning null. I logged canvas.width and canvas.height, it turns out to be 4032*3024. Also, I logged corresponding base64 using toDataUrl(), it returns only 'data:,' indicating that I cannot even use base64 as an alternative — Dheeraj Khathuria, Aug 12 '20 at 07:17
@DheerajKhathuria yes, like I said "*You can't do much about it, apart from limiting the size of the source canvas*" But your dimensions are surprisingly small actually.. what browser/device are you using? — Kaiido, Aug 12 '20 at 07:24
@Kaiido following system details : Microsoft Windows 8 Pro / 2GB RAM and browser is chrome — Dheeraj Khathuria, Aug 13 '20 at 09:13

[toBlob]Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'

0 Answers0