如何在 Windows 8 Metro 应用程序中将 html5 画布保存为图像文件？答案

【问题标题】：How to save html5 canvas as an image file in window 8 metro app?如何在 Windows 8 Metro 应用程序中将 html5 画布保存为图像文件？
【发布时间】：2012-08-26 21:32:38
【问题描述】：

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

我认为myImage 具有以 png 格式编码的图像字节现在如何将myImage 保存为文件（在图像文件夹中）？

【问题讨论】：

标签： javascript canvas windows-8 microsoft-metro

【解决方案1】：

您需要使用.msToBlob，而不是使用.toDataUrl：

var blob = canvas.msToBlob();

然后，您需要将其写入磁盘：

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

在您的应用程序数据文件夹中，您现在将图像写入磁盘。

如果你想把它放在其他地方——例如。我的图片等 - 然后您只需要使用其他存储文件夹之一。请参阅示例 here。请注意，要访问图片库，您需要将该功能添加到清单中（只是 VS 中 package.appxmanifest 编辑器中的一个复选框）

还有许多其他成像选项可用于对输出文件进行更复杂的操作。代码见imaging sample。

【讨论】：

【解决方案2】：

我发现这是简单成像示例中最有用的代码。它允许您编码为 PNG 或 JPG，而不仅仅是转储画布数据。

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

【讨论】：