Sujet Précédent Sujet Suivant

Image et canvas

vol68 Messages postés 33 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 8 mai 2016 - 14 nov. 2015 à 20:52
vol68 Messages postés 33 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 8 mai 2016 - 22 nov. 2015 à 17:30

Bonjour,

est il possible de comparer deux images extraitent par un snapshot d'un stream de camera ip ? ci dessous le code me permettant d'obtenir le snapshot et de l'afficher sur une page

<script>
document.write("'<canvas id='imagetemoin1' width='245' height='198' style='position:absolute; top:445px; left:10px; border:rgb(0, 0, 200) 2px solid; background-color: Black;' ></canvas>");
	   function imagetemoin1() {
			var video1 = document.getElementById('cam1stream');
      		var canvastemoin1 = document.querySelector('#imagetemoin1');
       	 	var ctxtemoin1 = canvastemoin1.getContext('2d');
			ctxtemoin1.drawImage(video1, 0,0, canvastemoin1.width, canvastemoin1.height);
</script>

Merci pour votre aide

A voir également:

Canvas to image javascript
Récupérer données json (javascript) - Conseils pratiques -Javascript
Poo javascript - Conseils pratiques -Javascript
Convolution image - Conseils pratiques -Java
Base de données javascript - Conseils pratiques -Javascript
Tuto javascript - Conseils pratiques -Javascript

4 réponses

Réponse 1 / 4

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
14 nov. 2015 à 22:54

bonjour

en quoi consiste la comparaison ?

Réponse 2 / 4

vol68 Messages postés 33 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 8 mai 2016
15 nov. 2015 à 07:27

Bonjour

J'aimerais savoir si une image prise à l'instant T est différente d'une image témoin prise par la même camera à l'instant t-x, si celle-ci est
"un peu différente" ou "tres différente" je ferais le tri ensuite

ci dessous le code de l'image témoin

<script>
		document.write("'<canvas id='imagetemoin1' width='245' height='198' style='position:absolute; top:445px; left:10px; border:rgb(0, 0, 200) 2px solid; background-color: Black;' ></canvas>");
	   function imagetemoin1() {
			var video1 = document.getElementById('cam1stream');
      		var canvastemoin1 = document.querySelector('#imagetemoin1');
       	 	var ctxtemoin1 = canvastemoin1.getContext('2d');
			ctxtemoin1.drawImage(video1, 0,0, canvastemoin1.width, canvastemoin1.height);
			savetemoins1();
		}
	</script>

et ci-dessous le code de la nouvelle image

	<script>
		document.write("'<canvas id='imgsnap1' width='245' height='198' style='position:absolute; top:445px; left:265px; border:rgb(0, 0, 200) 2px solid; background-color: Black;' ></canvas>");
	   function snapshot1() {
			var video1 = document.getElementById('cam1stream');
      		var canvas1 = document.querySelector('#imgsnap1');//'canvas'
       	 	var ctx1 = canvas1.getContext('2d');
          	// Draws current image from the video element into the canvas
			ctx1.drawImage(video1, 0,0, canvas1.width, canvas1.height);
                        savesnapshot1();
		}
	</script>

Merci pour ton intérêt

Réponse 3 / 4

vol68 Messages postés 33 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 8 mai 2016
21 nov. 2015 à 17:57

Bonjour

En fait est ce que quelqu'un pourrais me dire si l'objet que je trace avec "drawImage()" est utilisable par la suite avec "getImageData()"


var ImageTemoin = new Image();// crée un nouvel objet image
var CompareImageTemoin = document.getElementById("imagetemoin1");// extrait la valeur par l'ID du document 		
ImageTemoin = CompareImageTemoin;// transfert la valeur du document au nouvel objet image
var CanvasCompareImageTemoin = document.querySelector('#compare1');// defini le nouveau canvas
var CtxCanvasCompareImageTemoin = CanvasCompareImageTemoin.getContext('2d');// crée le context
CtxCanvasCompareImageTemoin.drawImage(ImageTemoin, 0,0, CanvasCompareImageTemoin.width, CanvasCompareImageTemoin.height);// trace l'image en pos x et y de taille xx et yy

Merci 'avance pour vos réponse.

Réponse 4 / 4

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153
Modifié par kazma le 21/11/2015 à 21:23

si l'image est affiché dans le canvas il n'y a aucuns soucis a utiliser getImageData

dans ce que tu veut faire en restant simple il faut sauvegarder les donné dans un variable global puis quand on recupere l'image suivante on compare les donnés avec celle de l'ancienne en precisant des limite car il faut prendre en compte la luminosité ambiante pour ça il faut tester en utilisant une seul couleur cele devrait suffire.

le code devrait ressemblé a un truc dans ce genre

var la_variable_globale=""

CtxCanvasCompareImageTemoin.drawImage(ImageTemoin, 0,0, CanvasCompareImageTemoin.width, CanvasCompareImageTemoin.height);
var idata=CtxCanvasCompareImageTemoin.getImageData( 0, 0, CanvasCompareImageTemoin.width, CanvasCompareImageTemoin.height);

var la_variable_local=idata.data

if(la_variable_globale!=""){  // condition pour le premier passage 

var limite=20 //a regler
var nbr_de_differents=0

for (var i=0;i<la_variable_globale.length;i+=4){ //on incremente de 4 pour r g b a

var r1 = la_variable_globale[i];  //on teste le rouge

var r2 = la_variable_local[i];

if(r1<r2-limite || r1>r2+limite){

 nbr_de_differents++
}

}

if( nbr_de_differents>1000){  // a regler

alerte("il y a du mouvement")

}

la_variable_globale=idata.data

}

rien ne sert de courir il faut partir a point.
cours Forest cours !

vol68 Messages postés 33 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 8 mai 2016
22 nov. 2015 à 16:36

Merci pour ton intérêt

mais je ne parviens pas à utiliser getImageData, l'exécution du script s'arrête sur cette ligne

var ImageTemoinGetImgData = CtxCanvasCompareImageTemoin.getImageData(1,1,50,50);

je ne comprends pas pourquoi ?

@karamel Messages postés 1855 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 18 avril 2024 153 > vol68 Messages postés 33 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 8 mai 2016
22 nov. 2015 à 17:21

je pense que le probleme vient du fait que l'image n'est pas chargé essai en integrant le code a l'interieur de onload

var ImageTemoin = new Image();// crée un nouvel objet image
var CompareImageTemoin = document.getElementById("imagetemoin1");// extrait la valeur par l'ID du document 		
ImageTemoin = CompareImageTemoin;// transfert la valeur du document au nouvel objet image
var CanvasCompareImageTemoin = document.querySelector('#compare1');// defini le nouveau canvas
var CtxCanvasCompareImageTemoin = CanvasCompareImageTemoin.getContext('2d');// crée le context

 ImageTemoin.onload=function(){
CtxCanvasCompareImageTemoin.drawImage(ImageTemoin, 0,0, CanvasCompareImageTemoin.width, CanvasCompareImageTemoin.height);// trace l'image en pos x et y de taille xx et yy
}

vol68 Messages postés 33 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 8 mai 2016
22 nov. 2015 à 17:28

J'ai testé mais lorsque je j'insère la ligne suivante

ImageTemoin.onload=function(){
CtxCanvasCompareImageTemoin.drawImage(ImageTemoin, 0,0, CanvasCompareImageTemoin.width, CanvasCompareImageTemoin.height);// trace l'image en pos x et y de taille xx et yy
}

l'image Témoin n'apparaît plus

vol68 Messages postés 33 Date d'inscription samedi 28 février 2004 Statut Membre Dernière intervention 8 mai 2016
22 nov. 2015 à 17:30

Mais effectivement le script ne s'arrête plus, merci à bientôt, je pense que j'aurais d'autres soucis

Discussions similaires

Partie entiére d'un nombre

vectoriser un logo sous photoshop

[Photoshop] : Image noir et blanc en image blanc et noir ?

Redirection par header ou javascript?

Votre réponse

Discussions similaires