javascript - How to save html5 canvas as an image file in window 8 metro app?

Question

var myImage = canvas.toDataURL("image/png");

I think myImage has the image bytes encoded in png format now how to save myImage as a file (in images folder)?

Answer 1

Instead of using .toDataUrl, you need to use .msToBlob:

var blob = canvas.msToBlob();

Then, you'll need to write this out to disk:

var output;
var input;
var outputStream;

Windows.Storage.ApplicationData.current.localFolder.createFileAsync("yourFile", 
          Windows.Storage.CreationCollisionOption.replaceExisting).
    then(function(file) {
        return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
    }).then(function(stream) {
        outputStream = stream;
        output = stream.getOutputStreamAt(0);
        input = blob.msDetachStream();
        return Windows.Storage.Streams.RandomAccessStream.copyAsync(input, output);
    }).then(function() {
        return output.flushAsync();
    }).done(function() {
        input.close();
        output.close();
        outputStream.close();
    });

In your applications app data folder, you will now have the image written to disk.

If you wish to place it somewhere else -- e.g. my pictures etc -- then you'll just need to use one of the other storage folders. See the sample here. Note that to access the pictures library you need to add that capability to your manifest (just a checkbox in the package.appxmanifest editor in VS)

There are many other imaging options too for more complex manipulation of the output file. See the imaging sample for code.