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.