Saving Canvas as blob and then blob as file

Question

This is more or less an icon on the page that when clicked does something, but the icon on the page is currently an anchor. I can change this to a div (all the rest of the icons are divs for that matter in my UI), but for some reason the following doesn't work.

Why does the first click register nothing?

$('#a').click(save);

function save(ev) {
  $('#canvas')[0].toBlob((blob) => {
    let URLObj = window.URL || window.webkitURL;
    ev.target.href = URLObj.createObjectURL(blob)
    ev.target.download = "untitled.png";
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id='canvas'></canvas>
<a id='a'>click me to save</a>

Fiddle to see behavior: https://jsfiddle.net/udbq3fb7/

If you inspect the element in your browser, you'll see it starts off without an href attribute (or just look at how you defined the source). After you click it the first time, you are setting the href on it. It then knows where to go for the second click. — Taplar, Jan 02 '18 at 01:58
jquery is in my code. look at the fiddle it is already referencing it. I didn't update the question with the code snippet, you did, which the snippet doesn't allow library additions. — simon, Jan 02 '18 at 01:59
Including the logic to reproduce the issue on site, rather than only linking to an external paste service, is preferred. — Taplar, Jan 02 '18 at 02:00
When the asynchronous `toBlob`'s callback fires, your click event is long time dead. The default behavior will have been executed already, and simply overriding your `` href's would have no direct effect. You would have to trigger yourself your ``'s `click()` method, but it will create an infinite loop of `save`... So better use an new anchor, or even better, a [library](https://github.com/eligrey/FileSaver.js/) that would even handle quirks. — Kaiido, Jan 02 '18 at 02:00
Thanks Kaiido I'll get back to you on trying to create a new element inside the callback. — simon, Jan 02 '18 at 02:07
Why is the event dead when its specified in the function header where the code is running? — simon, Jan 02 '18 at 02:18
A better question perhaps: Is there a way to maintain the state of the event into that callback? That would also solve my problem. — simon, Jan 02 '18 at 02:22
using FileSaver works for me as a solution, just tested and verified, so thank you @Kaiido — simon, Jan 02 '18 at 02:30
@simon if you got your solution, you can post an answer to your question and then mark it as answered. It might help other people. — theAlexandrian, Jan 02 '18 at 07:13
@theAlexandrian I figured another solution after much trial and effort without using a lib as well. Posted the answer below. — simon, Jan 02 '18 at 22:05

score 6 · Accepted Answer · answered Jan 02 '18 at 10:25

6

Through much trial and effort, without using a 3rd party, here is an answer that works too:

$('#a').click(save);

function save(ev) {
   $('#canvas')[0].toBlob((blob) => {
        let URLObj = window.URL || window.webkitURL;
        let a = document.createElement("a");  
        a.href = URLObj.createObjectURL(blob);
        a.download = "untitled.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
   });
}

fiddle: https://jsfiddle.net/rkqkr47w/

answered Jan 02 '18 at 10:25

simon

854
1
9
23

it looks like this causes the blob to leak, because `revokeObjectUrl()` is not called? https://stackoverflow.com/questions/49209756/do-i-always-need-to-call-url-revokeobjecturl-explicitly and https://w3c.github.io/FileAPI/#url-intro – Aralox Feb 11 '20 at 22:42
Probably not as in this case the anchor is being removed from the DOM I would assume. – simon Feb 15 '20 at 09:41

score 1 · Answer 2 · answered Jan 02 '18 at 07:21

Here is a walk-through the current situation:

User clicks.
Event gets dispatched in the document.
EventHandlers fire [if any].
default click behavior happens [if not prevented in 3.].

Now, what your code is trying to do is to overwrite the default behavior of the click (4.) action, by changing your <a>'s href in the event handlers (3.).

This trick normally works, because 3. happens before 4., but in your case, you are calling an asynchronous method in 3., and the href is only changed after your async callback gets called.

So you have
...
3. Canvas.toBlob(callback)
4. default click behavior happens
...
n. callback fires (change default behavior)

When your callback gets called, your click event is long dead, and changing its href will have incidence only on the next click.

You could call directly the <a>'s click method inside this callback, but it would lead to an infinite loop, except if you remove the event handler and reassign it again, but it would probably be easier to create a new <a> element altogether, that you would remove afterward, and even easier to use a library like FileSaver.js which does exactly this along with handling some quirks in older browsers.

$('#a').click(save);

function save(ev) {
  $('#canvas')[0].toBlob((blob) => {
    saveAs(blob, "untitled.png");
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.js"></script>
<canvas id='canvas'></canvas>
<a id='a'>click me to save</a>

accepted as answer. this all stemmed from the fact that some of the canvas data generated from my first call using toDataURL() was too big to fit into the anchor itself. — simon, Jan 02 '18 at 09:59

Saving Canvas as blob and then blob as file

2 Answers2