IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Insérer une image sans extension dans un canvas


Sujet :

JavaScript

  1. #1
    Membre régulier
    Homme Profil pro
    Développeur informatique
    Inscrit en
    septembre 2011
    Messages
    104
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : septembre 2011
    Messages : 104
    Points : 120
    Points
    120
    Par défaut Insérer une image sans extension dans un canvas
    Bonjour,

    J'ai dans ma page deux images (pour simplifier mon problème) :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    <img id="id1" src="/blabla/test.png" />
    <img id="id2" src="/tmp/qsdqsd" />

    J'essaie de mettre ces images dans un canvas comme ceci :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    jQuery('body').append('<canvas id="canvas"></canvas>');
    var img = new Image();
    img.src = jQuery("#id1").attr("src");
    var context = document.getElementById('canvas').getContext('2d');
    context.drawImage(img , 0, 0);
    Pour la première image, cela fonctionne parfaitement.
    En revanche, pour la seconde, qui n'a pas d'extension, pas du tout (alors que le navigateur l'affiche bien sur la page).

    Comment faire pour résoudre ce problème ?
    D'avance merci pour vos réponses

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 979
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 979
    Points : 65 379
    Points
    65 379
    Billets dans le blog
    1
    Par défaut
    l'image a-t-elle un header correct ?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Membre régulier
    Homme Profil pro
    Développeur informatique
    Inscrit en
    septembre 2011
    Messages
    104
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : septembre 2011
    Messages : 104
    Points : 120
    Points
    120
    Par défaut
    Il s'agit d'une image généré par un serveur, qui va rester genre 20 secondes sur la page avant d'être remplacée.
    Je ne pense pas que son header soit correct en effet. Chrome me lève ce message d'erreur à chaque fois qu'une nouvelle image arrive :

    Resource interpreted as Image but transferred with MIME type application/octet-stream: "http://[...]/tmp/53360

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 647
    Points : 91 423
    Points
    91 423
    Billets dans le blog
    20
    Par défaut
    Ca fonctionne parfaitement bien.
    Maintenant, reste à voir comment tu testes ça.
    A mon avis, tu dois légèrement oublier de revenir à l'origine lorsque tu veux afficher ta seconde image...
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var canvas = document.createElement('canvas');
    document.body.appendChild(canvas);
    var ctx = canvas.getContext('2d');
    var image1 = document.createElement('img');
    image1.src = document.getElementById('id1').src;
    var image2 = document.createElement('img');
    image2.src = document.getElementById('id2').src;
    ctx.drawImage(image1, 0, 0);
    ctx.moveTo(0,0);
    ctx.drawImage(image2, 0, 0);
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre régulier
    Homme Profil pro
    Développeur informatique
    Inscrit en
    septembre 2011
    Messages
    104
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : septembre 2011
    Messages : 104
    Points : 120
    Points
    120
    Par défaut
    Merci pour ta réponse.
    En revanche non ça ne fonctionne pas, et ce n'est pas à cause d'un retour à l'origine du canvas. Mon exemple avec l'image avec extension était pour montrer que cela fonctionne correctement comme ça.
    En réalité je n'utilise le script seulement sur la seconde image, qui elle pose problème.

Discussions similaires

  1. Afficher une image sans extension
    Par Mascotte dans le forum Balisage (X)HTML et validation W3C
    Réponses: 8
    Dernier message: 29/01/2008, 16h45
  2. atteindre une image sans id dans un div
    Par simoryl dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 01/02/2007, 19h24
  3. Afficher une image sans URL dans un forum
    Par Vanesse dans le forum Mode d'emploi & aide aux nouveaux
    Réponses: 2
    Dernier message: 01/03/2006, 18h55
  4. Réponses: 5
    Dernier message: 27/09/2005, 10h18
  5. Réponses: 2
    Dernier message: 19/11/2004, 09h54

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo