BlogBang

Comment encoder des données dans une URL

Par Korben | Nb visites : 231

Le RFC2397 (un RFC est un guide de référence) explique la fonction "data" d’une URL. Ok et alors ?

Et bien je trouve cela génial car cette fonction permet d’encoder des données directement dans une URL.
Je m’explique. Vous pouvez créez de toute pièce une URL contenant un fichier, qu’il soit image, ascii, texte ou encore xml. Celle-ci se forme de cette façon pour une image par exemple:

data:image/jpeg;base64,jpeg_encodée_en_base64

Ce RFC n’est pas nouveau mais mal connu. Il permettrait entre autre de faire des choses sympa comme un logiciel de retouche photo en javascript, ou alors de vous servir directement d’espace de stockage pour un blog ou un site qui n’en a pas, de poster des fichiers sur des forums qui autorisent les liens, ou encore, de passer outre les filtre emails… Et bien d’autres chose !

Moi je trouve ca sympa pour éviter a avoir stocker ses images sur un serveur à côté. Je me demande si je ne vais pas appliquer cela a mon blog.

Quoiqu’il en soit, voici comment faire !
Tout d’abord, il faut convertir votre fichier en base64. Moi je vais convertir une image.
Il a des tas de sites qui fond ça mais celui là est sympa: http://www.sveinbjorn.org/dataurlmaker

Une fois mon image uploadée, j’obtient ceci:
/9j/4AAQSkZJRgABAQIAHAAcAAD/2wBDAAUDBAQ
EAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SE
hEPERETFhwXExQaFRERGCEYGh0dHx8fExciJC
IeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4
eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4
eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCABV
AyADASIAAhEBAxEB/….etc

image2rw4 Comment encoder des données dans une URL

Plus votre fichier est gros, plus ces lignes de codées seront longues.
Il suffit ensuite de replacer cette chaine dans les tags cité ci dessus:

<img src="data:image/jpeg;base64,ICI_LE_CODE_BASE64">
et le tour est joué !

Voici le lien vers mon image: Mon image en DataURL !

Magique non ? A vous de jouer maintenant ! Je suis sûr que ça va bien vous rendre service !

Publicité

Je vous recommande aussi la lecture des sujets suivants


Faites un lien vers cette news sur votre site



20 commentaires

  1. Anonyme Reply to this comment


    Aahha korben, tu es un petit comique toi! ;)

    Request-URI Too Large
    The requested URL’s length exceeds the capacity limit for this server.

    request failed: URI too long

    Posté le 20 décembre 2006 à 04:24:07

  2. Unknownn Reply to this comment


    Merci encore Korben, je trouve cela tout simplement fantastique !

    Posté le 20 décembre 2006 à 06:40:40

  3. Unknownn Reply to this comment


    Bon c’est encore moi, j’ai testé et c’était juste pour vous dire que le tag correct est :

    Avec aucun espace. Bien sûr, comme Korben, remplacez ICI_LE_CODE_BASE64 par le code en base64. Ca fonctionne très bien en locale.

    Voili voilou !
    Unknownn ;)

    Posté le 20 décembre 2006 à 09:07:36

  4. Korben Reply to this comment


    Je suis désolé pour les espaces dans les codes, c’est a cause de ce style de daube « code »… Je ferai attention a ne plus l’utiliser a l’avenir.

    Merci

    Posté le 20 décembre 2006 à 16:29:50

  5. frEaK Reply to this comment


    coucou

    oui effectivement il y a des limites dans la longueur des GET HTTP. C’est pour cela que les POST HTTP ont été inventés :)

    a+

    Posté le 20 décembre 2006 à 17:18:30

  6. Anonyme Reply to this comment


    Je vais parraitre un peu rabajoie mais ImageShack revien au même non ???

    Posté le 20 décembre 2006 à 18:13:47

  7. jmp2 Reply to this comment


    merci pour cette astuce Korben franchement ton site est génial! visite pluri quotidienne !indispensable pour une bonne santé(forme) »informatique »!
    j’ai connu ton site grace à FON
    bravo meilleurs voeux à toi et ta famille
    jean-marc

    Posté le 20 décembre 2006 à 23:02:00

  8. Korben Reply to this comment


    Un peu oui, mais je jour ou imageshack (qu e j’utilise pour ce site d’ailleurs) coupe son service image, ca pourra poser quelques soucis… Quoi qu’il en soit, il s’agit plus d’une astuce que de quelque chose qui doit etre utilisé quotidiennement ! J’ai juste trouvé cela interressant.

    Posté le 21 décembre 2006 à 01:11:13

  9. Korben Reply to this comment


    Cool !! Ca fait plaisir !

    Posté le 21 décembre 2006 à 01:13:12

  10. mikeldj Reply to this comment


    marrant ça… bonjour la taille du copier/coller de l’url !! :)

    Posté le 21 décembre 2006 à 06:52:05

  11. Macleod Reply to this comment


    Euh! Il me semble que ton lien vers l’image ne marche pas sur IE6.
    Par contre firefox aucun problème.

    Sais tu pourquoi ?

    Posté le 22 décembre 2006 à 07:59:53

  12. Korben Reply to this comment


    Non, aucune idée… en plus je ne peux pas tester vu que je me suis débarrassé de IE 6.0 depuis un bail… Sorry

    Posté le 22 décembre 2006 à 08:21:08

  13. Macleod Reply to this comment


    Je m’attendais à cette réponse ;)
    Mais parfois, tu es obligé d’avoir IE, quand tu es au taf par exemple ^^

    Posté le 22 décembre 2006 à 08:42:32

  14. LuciferX Reply to this comment


    Ouahhh, vraiment géante cette technique, ainsi fini le hotlink de nos images ^^

    Posté le 22 décembre 2006 à 12:55:22

  15. amarweb Reply to this comment


    Bonsoir à tous!
    Moi, je ne voulais pas savoir comment encoder une image dans un lien, mais juste quelque chose de plus simple: mettre un texte sur un lien de téléchargement..Je m’explique: par exemple, il ya des sites où l’on te propose des liens de programmes, vidéos, etc..Ils mettent directement le lien, alors qu’il faudrait par exemple écrire juste le nom du programme comme si c’était un..filigrane! c’est plus esthétique, non?
    Quelqu’un pourrait-il m’aider, s’il vous plait?

    Posté le 18 février 2008 à 23:44:06

  16. erdnaxeli Reply to this comment


    Enorme ! Je trouve ce truc incroyable !
    Là on est vraiment dans la dématérialisation. Avant on pouvait ce dire que ça prend de la place sur un disque dur mais là plus rien. Le fichier n’a plus besoin d’être hébergé, je file une chaine de caractère à un pote et il obtient mon image. C’est fou !
    Bon c’est sur qu’avec une photo de 10 MP ça doit faire trèèèèèèèèès long, mais bon c’est déjà pas mal.

    Posté le 15 juin 2008 à 17:04:03

  17. erdnaxeli Reply to this comment


    J’ai vu que le même site popropose des scripts (pour justement les grosses images). Comment les utilise-t-on ? (I’m a noob ><)

    Posté le 15 juin 2008 à 17:30:00

  18. Aymerick Reply to this comment


    avec beaucoup de retard je tombe sur cette astuce,
    très intéressante je dois dire, mais contrairement à ce que semblent croire certaines personnes cela ne fait PAS gagner de place…
    En effet pour l’exemple l’image fait 20 Ko et le lien data à lui seul en fait 28…
    la règle physique de base : « rien ne se crée tout se transforme » est et sera toujours vraie :)

    Posté le 27 décembre 2008 à 11:39:26

  19. Nicolas Reply to this comment


    Comme l’indique le descriptif de la fonction PHP base64_encode :
    « Une chaîne encodée base64 prend environ 33 % de [ndl : de place en] plus que les données initiales. »
    (http://fr.php.net/manual/fr/function.base64-encode.php)

    Posté le 30 décembre 2008 à 09:57:38

  20. Sassoun Reply to this comment


    je fond, vive le RCF !

    Posté le 6 janvier 2010 à 01:07:28