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

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

我无法在Phonegap Apifind一种方法,而且我没有findphonegap插件。

我需要它与Iphone和Android合作

非常感谢!

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

1) URL

2)要在Sdcard中创建的文件夹名称

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 } } } 

//获取写入权限和文件夹创建的第二步

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

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

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

有用的链接

最新版本的Cordova(3.3 +),较新的(1.0.0+)版本的File使用文件系统URL而不是文件路径。 因此,要使接受的答案与FileSystemSuccess函数中的较新版本一起使用,请更改以下行:

 var fp = rootdir.fullPath; 

至:

 var fp = rootdir.toURL(); 

另一种简单的方法是使用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); 

这可以使用手机间隙文件插件来完成:

  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==" } } ); 

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

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

简短示例:

 document.addEventListener("deviceready",onDeviceReady); //google logo url url = 'http://img.androidcookie.com/javascript/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' 

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

最简单的方法

如果你对它在下载的文件夹中没问题,请执行以下操作

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

     cordova plugin add cordova-plugin-inappbrowser 
  2. 创建一个下载按钮

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

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

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

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

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

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

为此,请在url上下载encodeURI()

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

这个post中的代码完美无缺。 把它放在这里。

我清理并包装上面Suhas建议的代码-在角度服务中接受的答案 ,以便它可以很容易地用于其他应用程序。 你可以在这里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); } }); } });