locked
how to save canvas to my aplication folder using html5, javascript?

    Question

  • i am currently developing a simple html5 photo editing app.Now my images are store into pictures library folder, i want to save my image in to my application folder (download folder)

    Note: i am refer this code from SimpleImaging example ( http://code.msdn.microsoft.com/windowsapps/Simple-Imaging-Sample-a2dec2b0 )

    Mycode:

    Helpers.getFileFromSavePickerAsync().then(function (file) {
                    if (file != null) {
                        filename = file.name;
    
                        var myCanvas = id("mycanvas");
                        Context = myCanvas.getContext("2d");
                    
                        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) {
                    if (_stream != null) {
                        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) {
                    if (encoder != null) {
                        var width = id("mycanvas").width;
                        var height = id("mycanvas").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");
                }).then(null, function (error) {
                    WinJS.log && WinJS.log("Failed to save file: " + error.message, "sample", "error");
                }).done(function () {
                    stream && stream.close();
                });



    Wednesday, March 20, 2013 2:22 PM

Answers