locked
Saving a Canvas as an image in Windows 8

    Question

  • I want to save a canvas which as an image drawn on it to be saved as a png/jpg image.. I am working on Windows 8 application development using html and javascript. Kindly let me know how i can do it. what function can be used to save the canvas as an image using html5...

    Ramya

    Thursday, July 05, 2012 8:39 AM

Answers

  • Here's a more complete solution using the file picker to the completion of writing the stream. In this example, the "encoding" object is just one I created to hold a few values from a decoder when opening the file.

    var Imaging = Windows.Graphics.Imaging; var picker = new Windows.Storage.Pickers.FileSavePicker(); picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary; picker.fileTypeChoices.insert("PNG file", [".png"]); var imgData, fileStream = null; picker.pickSaveFileAsync().then(function (file) { if (file) { return file.openAsync(Windows.Storage.FileAccessMode.readWrite); } else { return WinJS.Promise.wrapError("No file selected"); } }).then(function (stream) { fileStream = stream; var canvas = document.getElementById("canvas1"); var ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); return Imaging.BitmapEncoder.createAsync(Imaging.BitmapEncoder.pngEncoderId, stream); }).then(function (encoder) { //Set the pixel data--assume "encoding" object has options from elsewhere encoder.setPixelData(encoding.pixelFormat, encoding.alphaMode, encoding.width, encoding.height, encoding.dpiX, encoding.dpiY, new Uint8Array(imgData.data)); //Go do the encoding return encoder.flushAsync(); }).done(function () {

    //Make sure to do this at the end
    fileStream.close(); }, function () { //Empty error handler (do nothing if the user canceled the picker });



    Saturday, July 07, 2012 4:11 AM
  • There is no equivalent for XAML.  Sorry!

    Jeff Sanders (MSFT)

    Wednesday, December 12, 2012 6:44 PM
    Moderator

All replies

  • I want to save a canvas which as an image drawn on it to be saved as a png/jpg image.. I am working on Windows 8 application development using html and javascript. Kindly let me know how i can do it. what function can be used to save the canvas as an image using html5...

    Ramya

    Thursday, July 05, 2012 8:40 AM
  • Hi Ramya,

    Although I am not aware of immediate sample for this , you can refer to the following links to start :-

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465032.aspx

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465040.aspx

    -Sagar

    Thursday, July 05, 2012 6:13 PM
    Moderator
  • Hi Ramya,

    You can obtain a png-encoded stream from your canvas with the following code:

    var inputStream = canvas.msToBlob().msDetachStream().getInputStreamAt(0);

    Alternatively, if you wish to encode the image differently, you can refer to the simple imaging sample (Scenario 3).

    Hope it helps!

    Marc

    Thursday, July 05, 2012 6:36 PM
  • I used msToBlob() myself, although slightly different. Your line looks pretty slick :)
    Friday, July 06, 2012 8:52 AM
  • Here's a more complete solution using the file picker to the completion of writing the stream. In this example, the "encoding" object is just one I created to hold a few values from a decoder when opening the file.

    var Imaging = Windows.Graphics.Imaging; var picker = new Windows.Storage.Pickers.FileSavePicker(); picker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary; picker.fileTypeChoices.insert("PNG file", [".png"]); var imgData, fileStream = null; picker.pickSaveFileAsync().then(function (file) { if (file) { return file.openAsync(Windows.Storage.FileAccessMode.readWrite); } else { return WinJS.Promise.wrapError("No file selected"); } }).then(function (stream) { fileStream = stream; var canvas = document.getElementById("canvas1"); var ctx = canvas.getContext("2d"); imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); return Imaging.BitmapEncoder.createAsync(Imaging.BitmapEncoder.pngEncoderId, stream); }).then(function (encoder) { //Set the pixel data--assume "encoding" object has options from elsewhere encoder.setPixelData(encoding.pixelFormat, encoding.alphaMode, encoding.width, encoding.height, encoding.dpiX, encoding.dpiY, new Uint8Array(imgData.data)); //Go do the encoding return encoder.flushAsync(); }).done(function () {

    //Make sure to do this at the end
    fileStream.close(); }, function () { //Empty error handler (do nothing if the user canceled the picker });



    Saturday, July 07, 2012 4:11 AM
  • Please note: I edited the code above--had fileStream.close in the wrong place
    Saturday, July 07, 2012 7:42 AM
  • How can I do the same in C#/XAML app ?
    Wednesday, July 11, 2012 5:57 AM
  • Farhan,

    Please ask your question in the C# forum.

    -Jeff


    Jeff Sanders (MSFT)

    Wednesday, July 11, 2012 1:49 PM
    Moderator
  • Thanks for this post. Extremely helpful. :)
    Sunday, November 04, 2012 1:37 AM
  •  i want to do this,but i'm working on windows 8 app development using c# and xaml.c# does not supply similar api,so could u tell me a solution,thx

    Wednesday, December 12, 2012 4:08 PM
  • There is no equivalent for XAML.  Sorry!

    Jeff Sanders (MSFT)

    Wednesday, December 12, 2012 6:44 PM
    Moderator