javascript - 如何在 window 8 metro 应用程序中将 html5 canvas 保存为图像文件？

Question

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

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

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

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

如果你想把它放在别的地方——例如我的照片等——那么您只需要使用其他存储文件夹之一。查看示例 here .请注意，要访问图片库，您需要将该功能添加到 list 中(只需在 VS 中的 package.appxmanifest 编辑器中添加一个复选框)

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