How to save canvas as image file in picture library WP app with HTML5?

Question

Now in my WP 8.1 app using HTML5/CSS/Js, I can draw a canvas. I would like to save this canvas as jpg file in my phone, like canvas.toDataURL() or any similar way.

So how can I do it ?
Thanks for read.

Answer 1

You can use something like this:

 function(canvas,imgfilename ) {
      var fileStream, imgData;
      var Imaging = Windows.Graphics.Imaging;
      var localFolder = Windows.Storage.ApplicationData.current.localFolder;
      localFolder.createFileAsync(imgfilename, Windows.Storage.CreationCollisionOption.replaceExisting).then(function(file) {
           return file.openAsync(Windows.Storage.FileAccessMode.readWrite);
      }).then(function(stream) {
           fileStream = stream;
           var ctx = canvas.getContext('2d');
           imgData = ctx.getImageData(0, 0, ctrl.canvas.width, ctrl.canvas.height);
           return Imaging.BitmapEncoder.createAsync(Imaging.BitmapEncoder.jpegEncoderId, stream);
      }).then(function(encoder) {
           encoder.setPixelData(Imaging.BitmapPixelFormat.rgba8, Imaging.BitmapAlphaMode.straight, canvas.width, canvas.height, 96, 96, new Uint8Array(imgData.data));
           return encoder.flushAsync();
      }).done(function() {
           fileStream.close();
      }, function() {});
 }