如何在手机上保存画布并使用phonegap获取图像的位置？

Question

使用 Phonegap 将画布保存到手机相册（相机胶卷等）的方法是什么？

保存后，如何使用 Cordova 获取图像 URL？为此我应该考虑哪些插件？

---

方法一：Canvas2Image 插件

使用this plugin，您可以使用以下方法将画布保存到手机库中：

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

但是，不清楚imageURI是如何传递或保存后返回的？

更新 23/02。我尝试了以下方法，但它从未达到我的成功回调：

$scope.done = function() {

    // todo: iterate over cloaks
    $ionicLoading.show({
            template: 'Saving images...'
    });


    // #issue: callback is not called
    saveCanvasToPhone().then(successCallback, errorCallback);

    var successCallback = function(output) {
        $ionicLoading.hide();

        window.alert("success call back: " + output) // never reached

        $scope.addNewImage(output);
        $state.go('tab.dash', {}, {reload: true}); // does not work
        $state.go('tab.dash') // does not work

        $scope.refreshLocalstorage();

    }

    // #issue4-nl: not working
    var errorCallback = function(error) {
        $ionicLoading.hide();
        console.log("error cb: "+ error)
        window.alert("error cb: " + error)
    }

    function saveCanvasToPhone() {



        var defer = $q.defer();

        try {
            window.canvas2ImagePlugin.saveImageDataToLibrary(
            function(output){

                $scope.addNewImage(output); // does not work to save imagepath on localstorage

                $scope.debugEntryOther = output // works fine
                defer.resolve(output)
                $ionicLoading.hide()
            },
            function(error){
                defer.reject(error)
                $ionicLoading.hide()
                window.alert(error)
            },
            document.getElementById('canvas')
        );
        } catch(error) {
                defer.reject(error)
                $ionicLoading.hide()
                console.log("saveCanvasToPhone: trycatch: error: " + error)
        }
        return defer.promise;
    } // save canvas to phone
} // done

Answer 1

不幸的是，Canvas2Image 插件最初设计用于将画布保存到画廊，而不是保存到文件并稍后处理文件。

我还没有找到这个插件的替代品（我也没有真正搜索过），但你可以设法获取保存文件的文件路径。

这取决于您所针对的平台：

• 对于android，文件路径在success函数的参数'msg'中传递
• 对于 Windows Phone，'msg' 参数返回字符串 'Image saved :' 后跟文件路径。所以你必须拆分字符串。
• 对于 IOS，使用原始插件实际上是不可能的，但有几个分支允许这样做。

我被告知作者很快会花一些时间来改进他的插件，所以我相信即使是 IOS 也可以使用“官方”插件获取文件路径。

与此同时，您可以使用my fork。在这种情况下，对于 IOS，路径在“msg”参数中返回，就像对于 android。