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

Posted 2023-05-06

【中文标题】Phonegap - 将图像从 url 保存到设备照片库中

【英文标题】：Phonegap - Save image from url into device photo gallery

【发布时间】：2014-03-01 21:11:21

【问题描述】：

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

我在 Phonegap Api 上找不到这样做的方法，而且我也没有找到相应的 phonegap 插件。

我需要它才能与 Iphone 和 android 一起使用

非常感谢！

【参考方案1】：

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

1) 网址

2) 文件夹名称您要在 SD 卡中创建的

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

使用此代码可以下载所有类型的文件。您可以将其用作 .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);
                 
            );

Useful Link

【讨论】：

如果您从任何 URL 下载图像，它会自动出现在您的设备库中。使用它，您可以通过创建新文件夹或现有文件夹来下载任何文件，而不仅仅是图像。

嗨，当我将此字符串添加到文件路径的开头时：file:///storage/sdcard0 - 它可以工作。也许，fileSystem.root 命令有问题？

吉安的回答对我有用。将rootdir.fullPath改为rootdir.toUrl();

If you download image from any URL, it will appear automatically in your device gallery. - 不适合我。我可以在我的文件系统上找到它，但它没有出现在图库中？

我在过去的 2 天里尝试了这个，但我无法保存到 iOS 设备的照片库。相反，图像被保存到应用程序的沙箱中（正如 URL 所建议的那样）。为了实现将图像保存在照片库中，我不得不使用cordova-plugin-canvas2image，它就像一个魅力。我看到这个答案有很多赞成票，所以可能 API 在此期间发生了变化，或者类似的事情。

【参考方案2】：

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

var fp = rootdir.fullPath; 

到：

var fp = rootdir.toURL(); 

【讨论】：

这仍然无法将图像保存到相册将拾取的位置。

【参考方案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);

【讨论】：

就我而言，这是唯一的答案，不仅可以下载照片，还可以根据操作要求将其插入图库。在 android 上，它调用 MediaScanner 意图来重新索引图库，以便它立即显示。在 iOS 上，它请求访问“照片”。

然而，在 winphone 上，它会引发安全错误。画布被“污染”并且不允许使用canvas.toDataURL；即使服务器在图像上设置了正确的 CORS 标头。

winphone (ie10) 在这里讨论 - 使用 xhr 的解决方法：***.com/questions/18112047/…。

这项工作对我来说有一些变化。我使用 phonegap 构建：github.com/devgeeks/Canvas2ImageDemo

如果您正在下载大图像，这将冻结 UI。

【参考方案4】：

这可以使用电话间隙file插件来完成：

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

【讨论】：

谢谢。但是我怎么知道设备库的文件路径呢？

您可以将它保存到 sdcard 中的任何文件夹，然后它应该会自动出现在您的图库中:)

其实我不确定iOS :(

@HazemHagrass 如果源 url 是作为数据 url 的图像，这是否也有效？

@Hazem 谢谢，这行得通，但我怎样才能存储到我的应用程序内的文件夹之一？对我来说只有 file:///storage/... 有效

【参考方案5】：

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

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

简短示例：

document.addEventListener("deviceready",onDeviceReady);

//google logo url
url = 'https://www.google.com/images/srpr/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'

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

【讨论】：

我不知道谁给了我一个downvote，我也不知道为什么，但它适用于IOS，易于使用。 :>

我猜是因为即使是插件也能正常工作，问题是非常具体的“在 android 和 ios 上工作”

【参考方案6】：

最简单的方法

如果您同意它位于下载文件夹中，请执行以下操作

安装应用内浏览器插件

cordova plugin add cordova-plugin-inappbrowser

用

创建一个下载按钮

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

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

【讨论】：

将下载图像。因为当我尝试时，它只下载像 pdf.for 图像这样的文档，我们必须保存图像，然后它要求保存（在 chrome 中）。如果我错了，请纠正我

嗯。会将所有适用的程序显示为处理程序。是的，但在大多数情况下，chrome 是唯一的，你说的是对的

他们能解决这个图像的小问题吗？？

【参考方案7】：

我目前正在处理cordova-plugin-photo-library。

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

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

【讨论】：

我建议您先阅读How to offer personal open-source libraries?，然后再在此处发布您的项目。

我读过。提出的问题是让 phonegap 插件保存到照片库，适用于 ios 和 android。答案提供了一个解决方案，并带有示例代码来实现@justtal 想要的。我透露我是图书馆的作者。我的回答真的不适合你吗？我亲自阅读了这个特定问题的答案，当没有找到对我有用的解决方案时，我实施了我分享的项目。

您在多个地方发布了完全相同的答案，没有对特定问题进行任何进一步的自定义，这就是我提示您阅读该帖子的原因。请不要去寻找您的图书馆可能提供解决方案的所有地方。

好的。看，我知道我用相同的复制粘贴答案回答了多个问题，但我们谈论的是多个完全相同的问题。我只是不知道我可以在答案中自定义什么，也许用不同的词说同样的话？会是更合适的发帖方式吗？

此时，投票关闭重复的问题。这就是我们的选择。

【参考方案8】：

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

为此在网址上使用encodeURI() 进行下载：

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

代码in this thread 运行良好。就放在这里吧。

【参考方案9】：

我清理了建议的代码并将by Suhas above - the accepted answer 包装在一个角度服务中，以便可以轻松地在其他应用程序中使用它。你可以找到截图here。

要使用它，请将脚本包含在 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);
            
        );
    
);