Laden Sie ein Leinwandbild in imgur (api v3) mit Javascript

Question

Ich baue ein lustiges Chrome-Experiment. Der Schnurrbart-Spiegel! http://sjoerddijkstra.nl/cam/ Ich möchte die Imgur API V3 verwenden, um ein Bild von Te Canvas nach Imgur hochladen und dann den Link anzeigen, aber ich weiß wirklich nicht wie. Alle Arbeitsbeispiele finde ich, sind die V2-API ...

Ich benutze canvas.toDataURL:

var dataURL = canvas.toDataURL("image/png"); 
return dataURL.replace(/^data:image\/(png|jpg);base64,/, ""); 

Answer 1

Imgur Dokumentation ist irgendwie IMO arm, aber nach dem zu fragen um in so fand ich dies funktioniert:

try { 
    var img = document.getElementById('myCanvas').toDataURL('image/jpeg', 0.9).split(',')[1]; 
} catch(e) { 
    var img = document.getElementById('myCanvas').toDataURL().split(',')[1]; 
} 

$.ajax({ 
    url: 'https://api.imgur.com/3/image', 
    type: 'post', 
    headers: { 
     Authorization: 'Client-ID <CHANGE_THIS_TO_BE_YOUR_CLIENT_ID>' 
    }, 
    data: { 
     image: img 
    }, 
    dataType: 'json', 
    success: function(response) { 
     if(response.success) { 
      window.location = response.data.link; 
     } 
    } 
}); 

<CHANGE_THIS_TO_BE_YOUR_CLIENT_ID> Ersetzen mit dem Client-ID erhalten Sie, wenn Sie Ihre Anwendung registrieren here (ich nahm die „anonyme Nutzungs ohne Benutzerberechtigung“ Option).