Question

我创建了一个简单的cordova android应用程序，我试图将图像从URL下载到图片库，但我真的无法弄清楚出了什么问题。我已经在stackoverflow中搜索了很多，包括以下链接：

Phonegap - Save image from url into device photo gallery

How to save an Image object into a file in Android with Phonegap?

我已经安装了cordova文件传输插件并尝试从官方网站上做示例，但它也不起作用：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-file-transfer/

我尝试了两种不同的代码：

1）第一次尝试：

document.getElementById("myBtn").addEventListener("click", function () {
    download("http://cordova.apache.org/static/img/cordova_bot.png", "data", "new_file");
});

function download(URL, Folder_Name, File_Name) {
    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.toURL();
        fp = fp + "/" + Folder_Name + "/" + File_Name + "." + ext; // fullpath and name of the file which we want to give
        filetransfer(download_link, fp);
    }

    function onDirectorySuccess(parent) {
        // Directory created successfuly
    }

    function onDirectoryFail(error) {
        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();
    fileTransfer.download(download_link, fp,
        function (entry) {
            alert("download complete: " + entry.fullPath);
            //cordova.plugins.imagesaver.saveImageToGallery(entry.fullPath, successCallback, errorCallback);
        },
        function (error) {
            alert("download error source " + error.source);
        }
    );
}

在此尝试中，我收到警告消息“下载完成：/my_folder/new_file.png ”，但我找不到图片的下载位置。绝对不是在图片库或我能找到的任何地方。

2）第二次尝试：

function download() {
    window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {

        var url = 'http://cordova.apache.org/static/img/cordova_bot.png';
        fs.root.getFile('downloaded-image.png', {
            create: true,
            exclusive: false
        }, function (fileEntry) {
            file_transfer(fileEntry, encodeURI(url), true);

        }, onErrorCreateFile);

    }, onErrorLoadFs);
}

function onErrorLoadFs(msg){
    alert(msg);
}

function onErrorCreateFile(msg){
    alert(msg);
}

function file_transfer(fileEntry, uri, readBinaryData) {

    var fileTransfer = new FileTransfer();
    var fileURL = fileEntry.toURL();

    fileTransfer.download(
        uri,
        fileURL,
        function (entry) {
            alert("download complete: " + entry.toURL());

            if (readBinaryData) {
                // Read the file...
                readBinaryFile(entry);
            } else {
                // Or just display it.
                displayImageByFileURL(entry);
            }

        },
        function (error) {
            alert("download error source " + error.source);
            alert("download error target " + error.target);
            alert("upload error code" + error.code);
        },
        null, // or, pass false
        {
            //headers: {
            //    "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
            //}
        }
    );
}

在此尝试中，我收到警告消息“下载完成：file：///data/user/0/com.companyname.xxxxxxx/cache/downloaded-image.png ”，但是我也无法在设备的任何地方找到图片。

我已经在两个不同的Android设备中尝试过该应用程序。

Answer 1

这就是我的方法。您将需要cordova文件插件它需要一个网址（在我的情况下为png）并将其保存在您的下载文件夹中（使其出现在手机的图库中）

//download file to device
function DownloadToDevice(fileurl) {
  var blob = null;
  var xhr = new XMLHttpRequest();
  xhr.open("GET", fileurl);
  xhr.responseType = "blob";//force the HTTP response, response-type header to be blob
  xhr.onload = function()
  {
      blob = xhr.response;//xhr.response is now a blob object
      console.log(blob);
      var storageLocation = "";
     switch (device.platform) {
         case "Android":
             storageLocation = 'file:///storage/emulated/0/';
             break;
         case "iOS":
             storageLocation = cordova.file.documentsDirectory;
             break;
     }
     var folderpath = storageLocation + "Download";
     var filename = "Myimg.png";
     var DataBlob = blob;
      window.resolveLocalFileSystemURL(folderpath, function(dir) {
        dir.getFile(filename, {create:true}, function(file) {
                file.createWriter(function(fileWriter) {
                    fileWriter.write(DataBlob);
                    //Download was succesfull
                }, function(err){
                  // failed
                  console.log(err);
                });
        });
      });
  }
  xhr.send();
}

Answer 2

您应该更改

行

window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, 
->
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,

和如果下载成功，则应重新扫描设备存储，因为Cordova不知道文件是否已下载。

所以我做了一个插件，

这是一个在下载后更新图库的插件。

https://github.com/pouu69/cordova-plugin-gallery-refresh

Answer 3

如果您仍在寻找解决方案，请尝试使用此适用于Android的插件

cordova plugin add cordova-plugin-downloadimage-to-gallery

Answer 4

我将此函数与回调一起使用。

要检查cordovaFileSystem的不同类型，请参见here或通过在控制台console.log(cordova.file)中键入来检查可用的类型

downloadFileToDevice('https://example.com/image.jpg', 'myimg.jpg', cordova.file.cacheDirectory,
 (err, filePath) => {
    if (err) {
      console.log('An error was found: ', err)
    } else {
      console.log('file downloaded successfully to: ' + filePath)
    }
  })

函数声明

function downloadFileToDevice (fileurl, filename, cordovaFileSystem, callback) {
  var blob = null
  var xhr = new XMLHttpRequest()
  xhr.open('GET', fileurl)
  xhr.responseType = 'blob' // force the HTTP response, response-type header to be blob
  xhr.onload = function () {
    blob = xhr.response // xhr.response is now a blob object
    var DataBlob = blob
    window.resolveLocalFileSystemURL(cordovaFileSystem, function (dir) {
      dir.getFile(filename, { create: true }, function (file) {
        file.createWriter(function (fileWriter) {
          fileWriter.write(DataBlob)
          callback(null, cordovaFileSystem + filename)
        }, function (err) {
          callback(err)
        })
      })
    })
  }
  xhr.send()
}

Cordova - 从URL下载图片到图片库

4 个答案:

函数声明