JavaScriptでダウンロードURLを呼び出す方法

Question

Unsplash APIを使用して写真ダウンロードアプリを作成しています。私は写真を呼び出して表示することができますが、JSON（http://unsplash.com/photos/_Ajm-ewEC24/download?force=true）からダウンロードリンクを呼び出そうとすると私はできません。

これは、ダウンロードリンクの呼び出し中に写真とタイトルを表示するために現在使用している機能です。私はURLを呼び出すためにjQueryの.loadを使ってみましたが、これはもちろん動作しませんでした。

const client_id = 'client_id=hiddenForSecurityReasons'; 

    const API = 'https://api.unsplash.com/'; 

    let randomPhoto = API + 'photos/random/?' + client_id; 

    // Ajax Call 

    $("#newRB").click(function() { 
     $.getJSON(randomPhoto, function (response) { 
     let randomPhotoPicture = response.urls.regular; 
     let randomPhotoTitle = response.location; 
     let download = response.links.download + "?force=true"; 


     document.getElementById('preview').src = randomPhotoPicture; 
     document.getElementById('randomTitle').innerHTML = randomPhotoTitle; 
     document.getElementById('downloadRB').load(download); 
     }) 
    }); 

HTML：

<div class="row"> 
     <div class="col-12 col-sm-6"> 
     <!-- Card --> 
     <article class="card animated fadeInLeft text-center"> 
      <img class="card-img-top img-responsive preview" id="preview" src="" /> 
      <div class="card-block"> 
      <h4 class="card-title" id="randomTitle"></h4> 
      <button type="button" class="btn btn-outline-primary" id="newRB">New Background</button> 
      <button type="button" class="btn btn-outline-primary" id="downloadRB">Download</button> 
      </div> 
     </article> 
     <!-- .end Card --> 
     </div> 
    </div> 

JSONの結果は、あなたが興味があるが、これは問題ではないはず場合にはここにある（コンソールは、ダウンロードリンクをログに記録するには、それが動作する私を示してい）：

{ 
"id": "6y6D3S_sEjw", 
"created_at": "2016-09-12T08:33:43-04:00", 
"updated_at": "2017-05-13T21:56:20-04:00", 
"width": 4500, 
"height": 3000, 
"color": "#919104", 
"slug": null, 
"downloads": 2835, 
"likes": 64, 
"views": 425961, 
"liked_by_user": false, 
"exif": { 
"make": "Canon", 
"model": "Canon EOS 6D", 
"exposure_time": "25", 
"aperture": "2.8", 
"focal_length": "24", 
"iso": 800 
}, 
"location": { 
"title": "Hovfjallet, Torsby, Sweden", 
"name": "Hovfjallet", 
"city": "Torsby", 
"country": "Sweden", 
"position": { 
"latitude": 60.2928188177545, 
"longitude": 12.9673533455078 
} 
}, 
"current_user_collections": [], 
"urls": { 
"raw": "https://images.unsplash.com/photo-1473683409080-b66239d1e547", 
"full": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&s=043cc47eeddbef09fc132b77f0bc9494", 
"regular": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&s=ac9893c66b73a7f91a8aa6dcf1ac7d6d", 
"small": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&s=6ac071858ad609f63b7c731ed70d936f", 
"thumb": "https://images.unsplash.com/photo-1473683409080-b66239d1e547?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=22b3b68e25b0283afac75e6d56ad6d35" 
}, 
"categories": [], 
"links": { 
"self": "https://api.unsplash.com/photos/6y6D3S_sEjw", 
"html": "http://unsplash.com/photos/6y6D3S_sEjw", 
"download": "http://unsplash.com/photos/6y6D3S_sEjw/download", 
"download_location": "https://api.unsplash.com/photos/6y6D3S_sEjw/download" 
} 

Answer 1

お試しください
私はthis SO answerから適合しました。

const client_id = 'client_id=hiddenForSecurityReasons'; 

const API = 'https://api.unsplash.com/'; 

let randomPhoto = API + 'photos/random/?' + client_id; 

// Ajax Call 

var link; 

$("#newRB").click(function() { 
    $.getJSON(randomPhoto, function (response) { 
    let randomPhotoPicture = response.urls.regular; 
    let randomPhotoTitle = response.location; 
    let download = response.links.download + "?force=true"; 


    document.getElementById('preview').src = randomPhotoPicture; 
    document.getElementById('randomTitle').innerHTML = randomPhotoTitle; 
    //document.getElementById('downloadRB').load(download); 

    // Create a link to be clicked by the download button 
    link = document.createElement('a'); 
    link.href = download; 
    link.download = 'Download.jpg'; // The file name suggestion for the user. 
    document.body.appendChild(link); 

    }); 
}); 

$("downloadRB").click(function(){ 
    link.click(); 
});