Cordova(Monaca)でURLから画像をダウンロードして写真ギャラリーに保存する

Webアプリなら一瞬で済みそうなことなのに、結構ハマりました…。
情報も断片的なものや古いものしかなく一苦労だったのでここに残します。

以下のCordovaプラグインを入れます。
cordova-plugin-file
cordova-plugin-file-transfer
cordova-plugin-save-image

JavaScriptの実装はこんな感じ。
var downloadAndSaveImageToGallery = function(url, name){
    var fileTransfer = new FileTransfer();

    if(monaca.isIOS === true){
        var storeDirectory = cordova.file.syncedDataDirectory;
    }else{
        var storeDirectory = cordova.file.externalApplicationStorageDirectory;
    }

    var onSaveImageSuccess = function() {
        console.log('save image success');
    };

    var onSaveImageError = function (error) {
        console.log('save image error: ' + error);
    };

    fileTransfer.download(
        url,
        storeDirectory + name,
        function(entry){
            cordova.plugins.imagesaver.saveImageToGallery(
                entry.toURL(), onSaveImageSuccess, onSaveImageError);
        },
        function(error){
            console.log( "download error source" + error.source);
            console.log( "download error target" + error.target);
            console.log("download error code" + error.code);
        },
        false,
        {
            //headers: {
            //    "Authorization": "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA=="
            //}
        }
    );
};

document.addEventListener('deviceready', function() {
    var url = 'https://cordova.apache.org/static/img/cordova_bot.png';
    downloadAndSaveImageToGallery(url, 'cordova.png');
}, false);
実行すると、iOS、Androidともにギャラリーへの保存許可のダイアログが出て、許可すると画像が保存されます。

ハイブリッドアプリはネイティブの機能使いだすと一気に難しくなりますね…。



追記。動画も扱いたい場合はこっち。