Comment enregistrer la toile html5 en tant que fichier image dans l'application de la fenêtre 8 sur le métro?

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

Je pense que myImage a les octets d'image encodés en format png maintenant comment enregistrer myImage tant que fichier (dans le dossier images)?

Au lieu d'utiliser .toDataUrl , vous devez utiliser .msToBlob :

 var blob = canvas.msToBlob(); 

Ensuite, vous devrez l'écrire sur le disque:

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

Dans votre dossier de données de l'application, vous disposez maintenant de l'image écrite sur le disque.

Si vous souhaitez le placer ailleurs – par exemple, mes images, etc. -, vous devrez simplement utiliser l'un des autres dossiers de stockage. Voir l'exemple ici . Notez que pour accéder à la bibliothèque de photos, vous devez ajouter cette fonctionnalité à votre manifeste (juste une case à cocher dans l'éditeur package.appxmanifest dans VS)

Il existe également d'autres options d'imagerie pour une manipulation plus complexe du fichier de sortie. Voir l' exemple d'image pour le code.

J'ai trouvé que c'était le code le plus utile du simple exemple d'imagerie. Il vous permet de coder pour PNG ou JPG plutôt que de simplement décharger les données de la toile.

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