Phonegap – 从url保存图像到设备照片库

我正在开发phonegap应用程序，我需要将图像从url保存到设备照片库。

我找不到在Phonegap Api的一种方法，也没有findphonegap插件。

我需要它与iPhone和Android的工作

非常感谢！

Answer 1

这是任何人都可以使用的文件下载代码。 你只有三个参数来使用这个 –

1） URL

2）你想要在你的SD卡中创build的文件夹名称

3） 文件名 （你可以给文件任何名字）

所有types的文件都可以使用这个代码下载。 你可以使用这个.js这也适用于IOS 。

 //First step check parameters mismatch and checking network connection if available call download function function DownloadFile(URL, Folder_Name, File_Name) { //Parameters mismatch check if (URL == null && Folder_Name == null && File_Name == null) { return; } else { //checking Internet connection availablity var networkState = navigator.connection.type; if (networkState == Connection.NONE) { return; } else { download(URL, Folder_Name, File_Name); //If available download function call } } } 

//第二步获得写权限和文件夹创build

 function download(URL, Folder_Name, File_Name) { //step to request a file system window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail); function fileSystemSuccess(fileSystem) { var download_link = encodeURI(URL); ext = download_link.substr(download_link.lastIndexOf('.') + 1); //Get extension of URL var directoryEntry = fileSystem.root; // to get root path of directory directoryEntry.getDirectory(Folder_Name, { create: true, exclusive: false }, onDirectorySuccess, onDirectoryFail); // creating folder in sdcard var rootdir = fileSystem.root; var fp = rootdir.fullPath; // Returns Fulpath of local directory fp = fp + "/" + Folder_Name + "/" + File_Name + "." + ext; // fullpath and name of the file which we want to give // download function call filetransfer(download_link, fp); } function onDirectorySuccess(parent) { // Directory created successfuly } function onDirectoryFail(error) { //Error while creating directory alert("Unable to create new directory: " + error.code); } function fileSystemFail(evt) { //Unable to access file system alert(evt.target.error.code); } } 

//将文件下载到创build的文件夹中的第三步

 function filetransfer(download_link, fp) { var fileTransfer = new FileTransfer(); // File download function with URL and local path fileTransfer.download(download_link, fp, function (entry) { alert("download complete: " + entry.fullPath); }, function (error) { //Download abort errors or download failed errors alert("download error source " + error.source); //alert("download error target " + error.target); //alert("upload error code" + error.code); } ); } 

有用的链接

Answer 2

最新版本的Cordova（3.3+），较新的（1.0.0+）版本的文件使用文件系统URL而不是文件path。 因此，为了使接受的答案在FileSystemSuccess函数中使用较新的版本，请更改以下行：

 var fp = rootdir.fullPath; 

至：

 var fp = rootdir.toURL(); 

Answer 3

另一个简单的方法是使用Cordova / Phonegap插件Canvas2ImagePlugin 。 安装它并将下面的函数添加到您的代码，该代码基于Raul Sanchez的getImageDataURL（） （谢谢！）。

 function saveImageToPhone(url, success, error) { var canvas, context, imageDataUrl, imageData; var img = new Image(); img.onload = function() { canvas = document.createElement('canvas'); canvas.width = img.width; canvas.height = img.height; context = canvas.getContext('2d'); context.drawImage(img, 0, 0); try { imageDataUrl = canvas.toDataURL('image/jpeg', 1.0); imageData = imageDataUrl.replace(/data:image\/jpeg;base64,/, ''); cordova.exec( success, error, 'Canvas2ImagePlugin', 'saveImageDataToLibrary', [imageData] ); } catch(e) { error(e.message); } }; try { img.src = url; } catch(e) { error(e.message); } } 

像这样使用它：

 var success = function(msg){ console.info(msg); }; var error = function(err){ console.error(err); }; saveImageToPhone('myimage.jpg', success, error); 

Answer 4

这可以使用电话差距文件插件完成：

  var url = 'http://image_url'; var filePath = 'local/path/to/your/file'; var fileTransfer = new FileTransfer(); var uri = encodeURI(url); fileTransfer.download( uri, filePath, function(entry) { console.log("download complete: " + entry.fullPath); }, function(error) { console.log("download error source " + error.source); console.log("download error target " + error.target); console.log("upload error code" + error.code); }, false, { headers: { "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA==" } } ); 

Answer 5

也许你可以尝试我为IOS写的插件

这里是git链接： https ： //github.com/Nomia/ImgDownloader

简短例子：

 document.addEventListener("deviceready",onDeviceReady); //google logo url url = 'https://www.google.comhttp://img.dovov.comsrpr/logo11w.png'; onDeviceReady = function(){ cordova.plugins.imgDownloader.downloadWithUrl(url,function(){ alert("success"); },function(){ alert("error"); }); } //also you can try dataUri like: 1px gif //url = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7' 

您还可以使用下载方法将本地文件保存到图像库

Answer 6

我目前正在研究cordova-plugin-photo-library 。

它可以保存由url（file：//或data :)给出的图像。 适用于ios和android，jpeg / png / gif：

 cordova.plugins.photoLibrary.saveImage(url, 'My album', function () {}, function (err) {}); 

Answer 7

我最初得到"Could not create target file" 。

对于那个使用encodeURI()的URL来下载：

 var DBuri = encodeURI("https://dl.dropbox.com/u/13253550/db02.xml"); fileTransfer.download( DBuri, sPath + "database.xml", 

而这个线程中的代码工作完美。 把它放在这里

Answer 8

最简单的方法

如果你确定它在下载的文件夹中，请执行以下操作

1. 安装应用内浏览器插件

    cordova plugin add cordova-plugin-inappbrowser 

2. 创build一个下载button

    onclick="window.open("Image_URL", '_system'); 

这不仅会下载它提供的图像在相应的应用程序或浏览器中打开图像。

Answer 9

我清理了一下，把上面提到的Suhas提供的代码打包成了一个angular色服务中被接受的答案 ，以便在其他应用程序中很容易地使用。 你可以在这里findsnipet。

要使用它，你需要在app.js（和你的index.html文件）中包含脚本：

 angular.module('myApp.controllers.whatever', []) .controller('WhateverController', function ($scope, SaveToGalleryService) { $scope.savePhoto = function(photoUrl, folderName, fileName, callback) { var fileName = new Date().getTime(); SaveToGalleryService.saveToGallery(photoUrl, "Kiddiz.me", fileName, function saveSuccess(res) { console.log("Photo ", photoUrl, "photo saved", res); if (callback) { callback(true, res); } }, function saveFail () { console.log("Photo ", photoUrl, "failed to save photo"); if (callback) { callback(false); } }); } });