如何使用 angularjs 从 url 下载（保存）图像到我们的相册中？

Posted 2023-02-18

【中文标题】如何使用 angularjs 从 url 下载（保存）图像到我们的相册中？

【英文标题】：How to download(save) an image from url into our photo album using angularjs?

【发布时间】：2017-10-25 16:25:07

【问题描述】：

我是 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)">

【问题讨论】：

你必须需要使用cordova-plugin-file-transfer

@jingyo 使用 vanilla cordova 框架的工作示例 - github.com/gandhirajan/Cordova_File_Operations

感谢您的帮助。但我的应用程序正在使用角度。我只是不明白如何将插件cordova-plugin-file-transfer 安装到cordova。

【参考方案1】：

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

cordova plugin add cordova-plugin-file-transfer

现在在模块中注入对ngCordova的依赖并

$cordovaFileTransfer 到您的控制器并添加以下代码：

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/

【讨论】：

但是有一个错误说：“无法读取未定义的属性'documentsDirectory'”。为什么？我已经安装了插件并注入了依赖 $cordovaFileTransfer。

尝试为文件提供一些其他目标路径