So rufen Sie die Download-URL mit JavaScript auf

Question

Ich verwende die Unsplash-API, um eine Foto-Download-App zu erstellen. Ich kann das Foto aufrufen und anzeigen, aber wenn ich versuche, den Download-Link von JSON (http://unsplash.com/photos/_Ajm-ewEC24/download?force=true) aufzurufen, kann ich das nicht.

Dies ist die Funktion, die ich derzeit verwende, um das Foto und den Titel anzuzeigen, während ich den Downloadlink-Aufruf versuche. Ich versuchte mit jQuery .load, um die URL aufzurufen, aber das hat natürlich nicht funktioniert.

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); 
     }) 
    }); 

Die 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> 

Das Ergebnis JSON ist hier, falls Sie neugierig sind, aber das sollte keine Rolle spielen (Konsole, um den Download-Link Anmeldung zeigt mir es funktioniert):

{ 
"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

Versuchen Sie dies ...
Ich angepasst von 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(); 
});