如何保存html5画布作为图像文件在窗口8 metro应用程序？ [英] How to save html5 canvas as an image file in window 8 metro app?

问题描述

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

我认为 myImage in png format
现在如何将 myImage 保存为文件（在images文件夹中）？

I think myImage has the image bytes encoded in png format now how to save myImage as a file (in images folder)?

推荐答案

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

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.

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

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.

这篇关于如何保存html5画布作为图像文件在窗口8 metro应用程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！