Save to Local File from Blob

Question

I have a difficult question to you, which i\'m struggeling on for some time now.

I\'m looking for a solution, where i can save a file to the users computer, without

Answer 1

FileSaver.js implements saveAs for certain browsers that don't have it

https://github.com/eligrey/FileSaver.js

Tested with FileSaver.js 1.3.8 tested on Chromium 75 and Firefox 68, neither of which have saveAs.

The working principle seems to be to just create an

Here is a demo that save a blob generated with canvas.toBlob to your download folder with the chosen name mypng.png:

var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var pixel_size = 1;

function draw() {
    console.log("draw");
    for (x = 0; x < canvas.width; x += pixel_size) {
        for (y = 0; y < canvas.height; y += pixel_size) {
            var b = 0.5;
            ctx.fillStyle =
                "rgba(" +
                (x / canvas.width) * 255 + "," +
                (y / canvas.height) * 255 + "," +
                b * 255 +
                ",255)"
            ;
            ctx.fillRect(x, y, pixel_size, pixel_size);
        }
    }
    canvas.toBlob(function(blob) {
      saveAs(blob, 'mypng.png');
    });
}
window.requestAnimationFrame(draw);

Here is an animated version that downloads multiple images: Convert HTML5 Canvas Sequence to a Video File

See also:

• how to save canvas as png image?
• JavaScript: Create and save file