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?
)
