Jquery 指定のURL画像をデスクトップに保存する方法が分かりません。

Question

以下サイトを参考に、画像取得を作成しました。

処理は流れていますが、ダウンロード失敗、成功が何も出ず、デスクトップにも表示されない状態です。
chromeで検証しています。

誤った個所や、チェックすべきポイントがありましたらご教示お願いいたします。

https://hajimete.org/jquery-download-btn

<a class="download_btn" href="画像のURL">画像取得</a>

    $(document).on('click', '.download_btn', function(e){
        e.preventDefault();
        
        var href_url = $(this).attr('href');
        var href_name = $(this).attr('href').replace(/\/g,'/').replace( /.*//, '' );
        $(e.target).attr({
            download: href_name,
            href: href_url
        });
    });

上記のコードから、e.preventDefault();を外しても、処理は通るが画像が保存されない状態です。

Comments

[dameo]

お手数ですが画像のURLとHTMLのURLを正確に記載してください
また「画像が保存されない状態」とは具体的にどういう状況になるのでしょうか？
開発者ツールのJavaScriptコンソール画面には何か表示されていますか？
開発者ツールのNetworkにはhttp(s)で画像のGETなどは出ているのでしょうか？

[dameo]

URLを聞いているのは
https://developer.mozilla.org/ja/docs/Web/HTML/Element/a#attr-download
によるものです。
[引用]
download は同一オリジンの URL と、 blob:、 data: の各スキームでのみ動作します。

Answer 1

e.preventDefault(); を消してください。これがダウンロードする挙動をキャンセルしてしまっているのでしょう。

Comments

[seastar]

回答いただきありがとうございます。
e.preventDefault();を抜きましたが、同じように処理は通りますが、実行結果として画像が保存されない状態です。。。