如何将 html5 画布另存为窗口 8 Metro 应用程序中的图像文件

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