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

admin管理员组

文章数量:1420205

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)?

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)?

• javascript
• canvas
• windows-8
• microsoft-metro

Share Improve this question Follow asked Sep 1, 2012 at 7:49 isaisa 1,0851616 silver badges2727 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

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 plex manipulation of the output file. See the imaging sample for code.

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();
});

本文标签： javascriptHow to save html5 canvas as an image file in window 8 metro appStack Overflow