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

Question

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

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

如何使用Phonegap将Image对象保存到Android中的文件中？

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

我尝试了 2 种不同的代码，它们是：

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.xxxxxxxx/cache/downloaded-image.png ”，但我也无法在任何地方找到图片装置。

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

Answer 1

我就是这样做的。 您将需要cordova文件插件，它将采用一个url（在我的情况下为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请参见此处或通过在控制台中键入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()
}