恩?
HTML5以後版本都可以這樣下載@@a

參考
https://www.w3school.com.cn/tags/att_a_download.asp

<a href="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg" download="圖片檔名.jpg" >Download</a>

<input type="button" id="btn" value="Download" />
      <script>
            function download(filename, textInput) {

                  var element = document.createElement('a');
                  element.setAttribute('href','data:text/plain;charset=utf-8, ' + encodeURIComponent(textInput));
                  element.setAttribute('download', filename);
                  document.body.appendChild(element);
                  element.click();
                  //document.body.removeChild(element);
            }
            document.getElementById("btn")
                  .addEventListener("click", function () {
                        var text = document.getElementById("text").value;
                        var filename = "output.txt";
                        download(filename, text);
                  }, false);
      </script>

如果要在前端下載且不要用A連結的話。這需要的是JS來幫你處理。
當然了，其原理還是利用了一下A連結的Download屬性去做下載。
只是A連結是另外程式幫你建立出來的。

這邊只是幫你提個方式，請勿直接照抄。但相信你了解其原理的話。這修改起來不難的。

PS:我是不直接提供答案的人，請原諒。

下載連結：

<a href="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg" download="23569861-sample-grunge-red-round-stamp.jpg">Download</a>

下載按鈕：

<a href="https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg" download="23569861-sample-grunge-red-round-stamp.jpg">
    <button>Download</button>
</a>

下載按鈕(想秀JavaScript版)：

<button id="download23569861">Download</button>
<script>
(() => {
    let downloadButton = document.querySelector('#download23569861');
    downloadButton.addEventListener('click', () => {
        let a = document.createElement('a');
        a.href = 'https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg';
        a.download = '23569861-sample-grunge-red-round-stamp.jpg';
        // document.body.appendChild(a);
        a.click();
        // a.remove();
    });
})();
</script>

看到這裡，我知道上述的方法皆對您毫無幫助。
因為如果你將程式碼貼至html檔案內，點擊後，都只會以新分頁開啟圖片。
原因很簡單：瀏覽器因顧及安全性問題，而禁止跨域下載。
所以，您必須以img標籤做跨域圖片載入，並繪製到canvas後，再進行下載。
請看下方作法。

下載連結(跨域版)：

<a href="javascript:download23569861();">Download</a>
<script>
    function download23569861(){
        let cvs = document.createElement('canvas'), 
            ctx = cvs.getContext('2d');
        // document.body.appendChild(cvs);
        let img = document.createElement('img');
        img.onload = () => {
            cvs.width = img.width;
            cvs.height = img.height;
            ctx.drawImage(img, 0, 0);
            var url = cvs.toDataURL();
            var a = document.createElement('a');
            a.href = url;
            a.download = '23569861-sample-grunge-red-round-stamp.jpg';
            a.click();
        };
        img.crossOrigin = 'anonymous';
        img.src = 'https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg';
    }
</script>

下載按鈕(跨域版)：

<button onclick="download23569861();">Download</button>
<script>
    function download23569861(){
        let cvs = document.createElement('canvas'), 
            ctx = cvs.getContext('2d');
        // document.body.appendChild(cvs);
        let img = document.createElement('img');
        img.onload = () => {
            cvs.width = img.width;
            cvs.height = img.height;
            ctx.drawImage(img, 0, 0);
            var url = cvs.toDataURL();
            var a = document.createElement('a');
            a.href = url;
            a.download = '23569861-sample-grunge-red-round-stamp.jpg';
            a.click();
        };
        img.crossOrigin = 'anonymous';
        img.src = 'https://previews.123rf.com/images/aquir/aquir1311/aquir131100316/23569861-sample-grunge-red-round-stamp.jpg';
    }
</script>