Utiliser imgur comme hébergeur d'image

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Astuce Utiliser imgur comme hébergeur d'image

Message par Ea le Dim 13 Sep 2015 - 18:48

Utiliser imgur comme hébergeur d'image


Ce code permet de remplacer le module d'upload d'hébergement d'image sur servimg, par le service d'hébergement d'image d'imgur.

Faire cela amène plusieurs contraintes :

  • Vous n'avez plus la stabilité de servimg, mais celle d'imgur (qui jusqu'à présent me semble correcte),
  • Il y a une limite de base du nombre maximum d'hébergement par jour, elle est actuellement d'environ 1250 (voir la page d'imgur avec ses limites),
  • Il n'y a pas moyen de donner une url (pour réhéberger une image), mais par exemple sur windows (et peut-être ailleurs) il suffit de mettre l'url dans la fenêtre de choix de l'image à envoyer,
en contrepartie, utiliser cette astuce :

  • peut rendre l'envoi d'image plus rapide,
  • permet d'envoyer plusieurs images en une seule fois,
  • rend impossible de retrouver à partir d'une image, quels autres images vous avez hébergé,
  • permet d'envoyer également des fichier au format apng, pdf et xcf en plus de bmp, jpg, png, gif, tiff (les fichiers tiff, bmp, pdf et xcf sont convertis en png, et les png plus grand que 756ko sont converti automatiquement en jpg),
  • permet en prenant l'url imgur et en retirant l'extension (par exemple .jpg, .png, .gif) d'arriver à une page où on voit le nombre de vue, des statistiques ainsi que différents codes de différentes dimensions de l'image
Pour essayer, vous pouvez aller à cette adresse et utiliser le bouton de la barre d'outils de l'éditeur en choisissant une ou plusieurs images.

Mise en place :

Pour utiliser l'astuce, il faut insérer le script suivant sur toutes les pages ( voir gestion des pages javascript ) et y remplacer ##VOTRE_CLIENT_ID## en suivant les instructions qui suivent :

Code:
;window['FormData'] && $(function(){$(function(){
 
  var imgur_client_id = '##VOTRE_CLIENT_ID##'; // remplacer par celui reçu en créant l'application via http://api.imgur.com/oauth2/addclient
 
  var current = 0, uploaded, xhrs, file_selector, button = $('.sceditor-button-servimg').off().click(function(){
    if(current) return finish();
    if(!file_selector) file_selector = $('<input type="file" multiple/ accept="image/*">').css({position:'absolute', top:-100}).appendTo('body').change(function (e) {
      var files = e.target.files, fd, len;
      uploaded = [], xhrs = [];
      for (var i = 0, len = files.length; i < len; i += 1) {
        if (files[i].type.indexOf('image/') && files[i].type !== 'application/pdf') continue;
        current++;
        fd = new FormData();
        fd.append('image', files[i]);
        (function(xhr){
          var num = i, xhr = jQuery.ajaxSettings.xhr();
          xhrs.push(xhr);
          xhr.open('POST', 'https://api.imgur.com/3/image');
          xhr.setRequestHeader('Authorization', 'Client-ID '+imgur_client_id);
          xhr.onreadystatechange = function () {
            if (xhr.readyState !== 4) return;
            current--;
            if (xhr.status === 200) {
              var res = JSON.parse(xhr.responseText);
              uploaded[num] = res.data.link;
            }
            if(!current) finish();
          };
          xhr.send(fd);
        })();
      }
      if(current) button.css({background:'url(http://i.imgur.com/EMsOJtZ.gif) no-repeat'});
    });
    file_selector.click();
    return false;
  }).children();
  var finish = function(){
    for(var i=0; i < xhrs.length; i++) {
        if(xhrs[i].readyState == 4) continue;
        xhrs[i].onreadystatechange = function(){};
        xhrs[i].abort();
    }
    for(var i=0; i < uploaded.length; i++) {
      if(uploaded[i] === undefined) continue;
      $('body').find('.sceditor-button-image').click().end().find('.sceditor-insertimage').find('#image').val(uploaded[i]).end().find('input.button').click();
      $('#text_editor_textarea').sceditor('instance').insertText('\n');
    }
    button.removeAttr('style');
    current = 0;
    file_selector.wrap('<form>').closest('form').get(0).reset();
    file_selector.unwrap();
    return false;
  };
})});

Pour pouvoir remplacer ##VOTRE_CLIENT_ID##, il faut aller sur ce lien pour enregistrer une demande d'utilisation du service d'imgur. Si vous n'êtes pas encore connecté à un compte il faudra d'abord le faire ou s'inscrire, et vous devrez ensuite retourner sur http://api.imgur.com/oauth2/addclient.

Une fois être connecté et que vous êtes sur la page "Register an Application", vous devez remplir le formulaire comme suit:


Les deux choses importantes à mettre, sont :

  • Dans "Authorization type" choisir "Anonymous usage without user authroization",
  • Dans "Authorization callback URL" mettre l'adresse de votre forum.
Une fois le formulaire bien rempli et envoyé, vous arriverez (et vous le recevrez aussi par email) sur une page qui vous donne votre "Client ID" :


C'est ce code qu'il faudra replacer dans le script plus haut, donc pour cet exemple, je devrais modifier la ligne du script comme cela :

Code:
var imgur_client_id = 'bb58c8c1e[caché]';

Et voilà, ça devrait être en place pour la rédaction de vos messages et messages privés


Ea
Aidactif
Aidactif

Messages : 23429
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum