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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

I used msToBlob() myself, although slightly different. Your line looks pretty slick :)

Answer 5

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

Answer 6

Please note: I edited the code above--had fileStream.close in the wrong place

Answer 7

How can I do the same in C#/XAML app ?

Answer 8

Farhan,

Please ask your question in the C# forum.

-Jeff

---

Jeff Sanders (MSFT)

Answer 9

Thanks for this post. Extremely helpful. :)

Answer 10

 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

Answer 11

There is no equivalent for XAML.  Sorry!

---

Jeff Sanders (MSFT)