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

Question

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

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

Answer 1

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

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

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

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

还有许多其他成像选项可用于更复杂的输出文件操作。有关代码，请参阅图像示例。

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