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

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 文件插件它需要一个 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();
}