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

How to save html5 canvas as an image file in window 8 metro app?(如何在 Windows 8 Metro 应用程序中将 html5 画布保存为图像文件?)

问题描述

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

我认为 myImage 具有以 png 格式编码的图像字节现在如何将 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:

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.

如果你想把它放在其他地方——例如.我的图片等 - 然后您只需要使用其他存储文件夹之一.请在此处查看示例.请注意，要访问图片库，您需要将该功能添加到清单中(只是 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.

这篇关于如何在 Windows 8 Metro 应用程序中将 html5 画布保存为图像文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！