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

jus*_*tal 25 javascript android ios phonegap-plugins cordova

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

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

我需要它与Iphone和Android合作

非常感谢!

Suh*_*has 34

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

1)URL

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
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

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

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);
 }
}
Run Code Online (Sandbox Code Playgroud)

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

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);
                 }
            );
}
Run Code Online (Sandbox Code Playgroud)

有用的链接

  • 嗨,当我将这个字符串添加到文件路径的开头:`file:/// storage/sdcard0` - 它可以工作.也许,fileSystem.root命令有一些问题? (3认同)
  • `如果您从任何URL下载图像,它将自动出现在您的设备库中. - 不适合我.我可以在我的文件系统上找到它,但它没有出现在库中? (3认同)
  • 我在过去两天尝试了这个,但我无法保存到iOS设备的照片库中.相反,图像被保存到应用程序的沙箱中(如URL所示).为了实现在照片库中保存图像,我不得不使用`cordova-plugin-canvas2image`,它就像一个魅力.我看到这个答案有很多赞成,所以也许API在此期间发生了变化,或类似的东西. (3认同)
  • 吉安的回答对我有用.将rootdir.fullPath更改为rootdir.toUrl(); (2认同)

Gia*_*cia 18

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

var fp = rootdir.fullPath; 
Run Code Online (Sandbox Code Playgroud)

至:

var fp = rootdir.toURL(); 
Run Code Online (Sandbox Code Playgroud)


M16*_*437 8

另一种简单的方法是使用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);
    }
}
Run Code Online (Sandbox Code Playgroud)

像这样使用它:

var success = function(msg){
    console.info(msg);
};

var error = function(err){
    console.error(err);
};

saveImageToPhone('myimage.jpg', success, error);
Run Code Online (Sandbox Code Playgroud)

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

Haz*_*ass 6

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

 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=="
            }
        }
    );
Run Code Online (Sandbox Code Playgroud)

  • 谢谢.但是我怎么知道设备库的filePath? (2认同)

归档时间:

查看次数:

60176 次

最近记录:

8 年,8 月 前