如何使用angularjs将图像从url下载(保存)到我们的相册中?

时间:2017-05-25 06:03:32

标签: javascript ios angularjs cordova save-image

我是 angularjs 的新手,我的项目使用angularjs和ionic在android和IOS平台上运行。我需要使用图片网址将图片保存到手机相册(支持 IOS和Andorid )。我知道cordova插件可以从url下载图像,但我无法理解如何安装cordova-plugin-file-transfer。有没有其他更简单的方法来实现这个功能?感谢。



angular.module('myApp', []);

angular.module('myApp').controller('HomeCtrl', ['$scope', '$http', function($scope, $http) {

  $scope.saveImg = function(imgUrl){
   var hideSheet = $ionicActionSheet.show({
                        buttons: [
                            {text: 'save image'},
                            {text: 'copy link'},
                        ],
                        cancelText: 'cancel',
                        cancel: function () {
                        },
                        buttonClicked: function (index) {
                            if (index == 0) {//save image here
                               
                            }
                        }
                    });

  }
 
}]);

<img ng-src="{{imgUrl}}" on-hold="saveImg(imgUrl)">
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

首先,您需要使用CLI安装插件:

cordova plugin add cordova-plugin-file-transfer

现在在模块和

中注入对ngCordova的依赖

$ cordovaFile转移到您的控制器并添加以下代码:

var app= angular.module('myApp', ['ngCordova']);

    app.controller('HomeCtrl', ['$scope', '$http', '$cordovaFileTransfer',function($scope, $http,$cordovaFileTransfer) {

    var url = "http://cdn.wall-pix.net/albums/art-space/00030109.jpg"; // your url
        var targetPath = cordova.file.documentsDirectory + "testImage.png"; // filename
        var trustHosts = true;
        var options = {};
    $scope.trans=function(){
        $cordovaFileTransfer.download(url, targetPath, options, trustHosts)
          .then(function(result) {
            // Success!
          }, function(err) {
            // Error
          }, function (progress) {

          });

       }

    }]);

以下是参考:http://ngcordova.com/docs/plugins/fileTransfer/