Discussion :

[flow10000]

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

[SpaceFrog]

l'image a-t-elle un header correct ?

[flow10000]

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

[Bovino]

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

[flow10000]

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.