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

IT技术 javascript android ios cordova phonegap-plugins
2021-02-02 23:08:51

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

我在 Phonegap Api 上找不到这样做的方法,而且我也没有为此找到 phonegap 插件。

我需要它与 Iphone 和 Android 配合使用

非常感谢!

6个回答

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

1)网址

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

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

有用的链接

吉安的回答对我有用。将 rootdir.fullPath 更改为 rootdir.toUrl();
2021-03-24 23:08:51
过去 2 天我试过这个,但我无法保存到 iOS 设备的照片库。相反,图像被保存到应用程序的沙箱中(如 URL 也建议的那样)。为了实现在照片库中保存图像,我不得不使用cordova-plugin-canvas2image它就像一个魅力。我看到这个答案有很多赞成票,所以也许 API 在此期间发生了变化,或者类似的事情。
2021-04-02 23:08:51
如果您从任何 URL 下载图像,它会自动出现在您的设备库中。使用它,您可以通过创建新文件夹或现有文件夹来下载任何文件,而不仅仅是图像。
2021-04-04 23:08:51
嗨,当我将此字符串添加到文件路径的开头时:file:///storage/sdcard0- 它有效。也许,fileSystem.root 命令有问题?
2021-04-06 23:08:51
If you download image from any URL, it will appear automatically in your device gallery.- 不适合我。我可以在我的文件系统上找到它,但它没有出现在图库中?
2021-04-08 23:08:51

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

var fp = rootdir.fullPath; 

到:

var fp = rootdir.toURL(); 
这仍然不会使图像保存到照相馆将要拾取的位置。
2021-03-21 23:08:51

另一种简单的方法是使用 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);
这对我来说有一点变化。我使用 phonegap 构建:github.com/devgeeks/Canvas2ImageDemo
2021-03-15 23:08:51
就我而言,这是唯一不仅可以下载照片,还可以根据操作要求将其插入图库的答案。在 android 上,它调用 MediaScanner 意图来重新索引图库,以便它立即显示。在 iOS 上,它请求访问“照片”。
2021-03-17 23:08:51
winphone(IE10)在这里讨论-使用XHR解决方法:stackoverflow.com/questions/18112047/...
2021-03-17 23:08:51
如果您正在下载大图像,这将冻结 UI。
2021-04-01 23:08:51
但是,在 winphone 上,它会引发安全错误。画布被“污染”,canvas.toDataURL不允许使用;即使服务器在图像上设置了正确的 CORS 标头。
2021-04-04 23:08:51

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

 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=="
            }
        }
    );
谢谢。但是我怎么知道设备库的文件路径?
2021-03-19 23:08:51
@Hazem 谢谢,这有效,但我如何存储到我的应用程序内的文件夹之一?对我来说只有 file:///storage/... 有效
2021-03-22 23:08:51
其实我不确定iOS :(
2021-03-23 23:08:51
@HazemHagrass 如果源 url 是作为数据 url 的图像,这也有效吗?
2021-03-26 23:08:51
您可以将其保存到 sdcard 中的任何文件夹,然后它应该会自动出现在您的图库中:)
2021-04-09 23:08:51

也许你可以试试我为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'

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

我想这是因为即使插件有效,问题也非常具体“在 android 和 ios 上工作”
2021-04-07 23:08:51
我不知道谁给了我一个downvote,我也不知道为什么,但它适用于IOS,易于使用。:>
2021-04-11 23:08:51