html5中 save方法,如何HTML5画布另存为窗口8 Metro应用中的图像文件？(How to save html5 c...

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

});

文章来源: How to save html5 canvas as an image file in window 8 metro app?