locked
Save Canvas to picture libary using Fabricjs and Filesavepicker

    Question

  • Hello,am a newbie and am currently developing a simple html5 photo editing app.Am using http://www.fabricjs.com as a wrapper for the Html canvas.

    It is quite easy to save the canvas as a .png image with fabricjs,using the following code:

     var dataURL = canvas.toDataURL('png');

    My little problem is that i have no idea how to save the content of the canvas as a .png with the Windows.Storage.Pickers.FileSavePicker(); api.

    Thanks, any help would be greatly appreciated.....





    Sunday, February 24, 2013 8:47 AM

Answers

  • Hi Donnieibiyemi,

    In order to avoid replacing the existing file (with the same name), you can change the "CreationCollisionOption" paramter when invoking the "createFileAsync" method. I originally specify "replaceExisting" value, you can change it to "generateUniqueName". For example:


    picLib.createFileAsync("canvas_image.png", Windows.Storage.CreationCollisionOption.generateUniqueName).then(

    #CreationCollisionOption enumeration (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.creationcollisionoption.aspx

    Also, this doesn't matter when you change to use "FilePicker" component for creating the new file for saving the image. In case you want more information about using FilePicker, you can download the sdk sample and explore the related code:


    #File picker sample
    http://code.msdn.microsoft.com/windowsapps/File-picker-sample-9f294cba


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Tuesday, February 26, 2013 2:46 AM
    Moderator

All replies

  • Hello, am building a simple photo editing app. am making use of the html5 Canvas.please how do i use the  new Windows.Storage.Pickers.FileSavePicker(); api to save the canvas as an image in the picture libary?.



    Sunday, February 24, 2013 5:32 PM
  • Hi Donnieibiyemi,

    To save canvas as image, I would like to suggest you check the solution Kraig provided in the similar post

    http://social.msdn.microsoft.com/Forums/et-EE/winappswithhtml5/thread/cf8c17dc-68d4-4777-951f-bb7f0665bd06

    hope this helps, thanks.


    Yanping Wang
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    Monday, February 25, 2013 5:22 AM
    Moderator
  • Hi Donnieibiyemi,

    To save the HTML5 canvas element's graphic to an image file (in well-known or application specific folder), you can also tried the following steps:

    1. Use canvas.toDataURL method to export the canvas data, the output is a URL which contains the entire image binary as base64 encoding string. You need to do some string replacement to get the base64 string part.

    2. Use Windows.Security.Cryptography.CryptographicBuffer class to convert the base64 string to a IBuffer object

    #CryptographicBuffer class (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.security.cryptography.cryptographicbuffer.aspx


    3. Create a new file (either via folder object or via FilePicker) and write the buffer into the file by using Windows.Storage.FileIO.writeBufferAsync method.

    Here is a simple example:

    _saveCanvasToImage: function(){
        var canvas = document.getElementById("canvas1");
                
        if (canvas.getContext) {
            var ctx = canvas.getContext("2d");
            ctx.fillStyle = "rgb(20,40,80)";
            ctx.fillRect (0, 0, 500, 50);
            ctx.fillStyle = "rgba(200, 150, 100, 0.5)";
            ctx.fillRect(0, 50, 500, 50);  
        }
        var url = canvas.toDataURL("image/png");
        var base64Data = url.replace("data:image/png;base64,", "");
                
        var buffer = Windows.Security.Cryptography.CryptographicBuffer.decodeFromBase64String(base64Data);
        var picLib = Windows.Storage.KnownFolders.picturesLibrary;
               
        picLib.createFileAsync("canvas_image.png", Windows.Storage.CreationCollisionOption.replaceExisting).then(
            function (file) {
                        
                return Windows.Storage.FileIO.writeBufferAsync(file, buffer);
            }
        ).done(
            function(){
                console.log("write file complete");
            },
            function(err){
                console.log("error: " + err);
            }
        );
    }


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Monday, February 25, 2013 7:24 AM
    Moderator
  • Thanks Steven, 

    Your Solution works perfectly.Please how can i make the 'filename' dynamic so as to prevent the script from overwriting  the current image with the new one.

    Thanks!!


    Monday, February 25, 2013 9:44 AM
  • Hi Donnieibiyemi,

    In order to avoid replacing the existing file (with the same name), you can change the "CreationCollisionOption" paramter when invoking the "createFileAsync" method. I originally specify "replaceExisting" value, you can change it to "generateUniqueName". For example:


    picLib.createFileAsync("canvas_image.png", Windows.Storage.CreationCollisionOption.generateUniqueName).then(

    #CreationCollisionOption enumeration (Windows)
    http://msdn.microsoft.com/en-us/library/windows/apps/windows.storage.creationcollisionoption.aspx

    Also, this doesn't matter when you change to use "FilePicker" component for creating the new file for saving the image. In case you want more information about using FilePicker, you can download the sdk sample and explore the related code:


    #File picker sample
    http://code.msdn.microsoft.com/windowsapps/File-picker-sample-9f294cba


    Please remember to mark the replies as answers if they help and unmark them if they provide no help.


    Tuesday, February 26, 2013 2:46 AM
    Moderator
  • Thanks Dude.You are awesome!!
    Thursday, February 28, 2013 9:18 AM
  • Thanks! This is almost exactly what I need! But is there a way to do it with a fileSavePicker? I've tried several things but it hasn't worked.
    Thursday, August 29, 2013 3:41 PM