Save canvas image on local mobile storage for IOS/Android

问题

Im using the fabric javascript library to create a custom image. All the data is saved in a canvas and is shown using canvas tag. After displaying the image, I would like to give the user the option to save it locally. Anyone has any idea how to do that? The solution should work for IOs and Android, I've tried several alternatives but still no luck.

[Update 1] I tried using the Canvas2ImagePlugin but for some reason my app restarts when running the window.canvas2ImagePlugin.saveImageDataToLibrary command.

My code (I want to save the image when the users touches the saveButton):

$(document).on('click', '#saveButton', function(e){

    window.canvas2ImagePlugin.saveImageDataToLibrary(
    function(msg){
        console.log(msg);
    },
    function(err){
        console.log(err);
    },
    document.getElementById('c')
);

});

This is shown in the browser logs after the app restarts:

deviceready has not fired after 5 seconds. (13:09:28:529) at file:///android_asset/www/cordova.js:1169 Channel not fired: onPluginsReady (13:09:28:542) at file:///android_asset/www/cordova.js:1162 Channel not fired: onCordovaReady (13:09:28:550) at file:///android_asset/www/cordova.js:1162 Channel not fired: onDOMContentLoaded (13:09:28:557) at file:///android_asset/www/cordova.js:1162

I also noticed that when Netbeans builds my app, for some reason it deletes the plugin. This is part of the build output:

update-plugins:

cordova.cmd plugins cordova.cmd -d plugin remove org.devgeeks.Canvas2ImagePlugin

Calling plugman.uninstall on plugin "org.devgeeks.Canvas2ImagePlugin" for platform "android" Uninstalling org.devgeeks.Canvas2ImagePlugin from android

[Update 2]

After some research I found out that I had to add the plugin manually in the file \nbproject\plugin.properties. Now its working perfectly. Thank you AtanuCSE

回答1:

try this plugin

Canvas2ImagePlugin

<canvas id="myCanvas" width="165px" height="145px"></canvas>
function onDeviceReady()
{
    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
        },
        function(err){
            console.log(err);
        },
        document.getElementById('myCanvas')
    );
}

回答2:

With Canvas2ImagePlugin now u can choose either to save as jpg/png, set quality and set outputfolder

function onDeviceReady()
{
    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);  //msg is the filename path (for android and iOS)
        },
        function(err){
            console.log(err);
        },
        document.getElementById('myCanvas'),
        '.jpg', // save as jpg
        80, // image quality
        'cunvaspluginfolder' //folder name
    );
}

Credit to wbt11a because make this plugin more configurable from original author.

Please download the new plugin here Github source

来源：https://stackoverflow.com/questions/28785019/save-canvas-image-on-local-mobile-storage-for-ios-android

标签

javascript

cordova

canvas

fabricjs

phonegap-build