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.

Answer 2

I found this to be the most helpful bit of code from the simple imaging sample. It lets you encode to PNG or JPG rather than just dumping the canvas data.

Helpers.getFileFromSavePickerAsync().then(function (file) {
    filename = file.name;

    switch (file.fileType) {
        case ".jpg":
            encoderId = Imaging.BitmapEncoder.jpegEncoderId;
            break;
        case ".bmp":
            encoderId = Imaging.BitmapEncoder.bmpEncoderId;
            break;
        case ".png":
        default:
            encoderId = Imaging.BitmapEncoder.pngEncoderId;
            break;
    }

    return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
}).then(function (_stream) {
    stream = _stream;

    // BitmapEncoder expects an empty output stream; the user may have selected a
    // pre-existing file.
    stream.size = 0;
    return Imaging.BitmapEncoder.createAsync(encoderId, stream);
}).then(function (encoder) {
    var width = id("outputCanvas").width;
    var height = id("outputCanvas").height;
    var outputPixelData = Context.getImageData(0, 0, width, height);

    encoder.setPixelData(
        Imaging.BitmapPixelFormat.rgba8,
        Imaging.BitmapAlphaMode.straight,
        width,
        height,
        96, // Horizontal DPI
        96, // Vertical DPI
        outputPixelData.data
        );

    return encoder.flushAsync();
}).then(function () {
    WinJS.log && WinJS.log("Saved new file: " + filename, "sample", "status");
    id("buttonSave").disabled = false;
    id("buttonRender").disabled = false;
}).then(null, function (error) {
    WinJS.log && WinJS.log("Failed to save file: " + error.message, "sample", "error");
}).done(function () {
    stream && stream.close();
});