[SOLUCIONADO] no logro comparar dos Canvas

hcrisel · #1 (**permalink**) 26/01/2014, 07:37

Hola Buenos Días

Encaré un proyecto relacionado con las etiquetas CANVAS e IMG y me encontré con el siguiente problema.
Tengo un directorio de imagenes al cual le incorporo una imagen nueva, pero antes necesito saber si existe en el directorio.

Para esto muy inocentemente puse:

if (canva0==canva) {alert("las imagenes son iguales");} else {alert("las imagenes son distintas");}

Siempre se vá por el DISTINTO cuando he puesto las imagenes iguales.

Mi consulta es:

¿Estoy comparando dos canvas en un modo incorrecto?
¿No puedo comparar el contenido de un Canvas con otro Canvas?

Aclaraciones:
Las imagenes las tengo en un Array tomo una y la comparo con la que deseo agregar.
Primero probé pasando el Canvas a <img> y comparé una etiqueta img con la otra y me pasó lo mismo.

Te agradezco de antemano cualquier comentario al respecto.

Código HTML:

Ver original<!DOCTYPE html>
<html lang='es'>
<!-- Compara una lista de imagenes hasta hallar la misma. -->
<html>
 
  <head>
        <title>Uso de Javascript</title>
      <meta charset='UTF-8'>
  </head>
  
  <body>
      <h1> Compara una imagen con otras cambiando cada 3 segundos</h1>
      <!-- Esta es la que busco -->
      <img id="foto" style="width:240px; heigth:120px;" src="file:///C:/barra/img05.jpg"/>
      <!-- Esta es la lista de imagenes a comparar -->
      <img id="fotx" style="width:240px; heigth:120px;" src="misImagenes[NumImagen]"/>
  </body>
 
  <script>
  
      var i = 0; // Contador de imagenes
 
      // cargo en un Array todas las imagenes de la carpeta
      Ki = 22; var misImagenes= new Array(Ki);
      for (k = 0; k < Ki; k++) {
          if(k<10) {misImagenes [k]="file:///C:/barra/img0"+k+".jpg";} else {
          misImagenes [k]="file:///C:/barra/img"+k+".jpg";}
      }
 
 
        // Aqui voy cambiando cada imagen y las comparo con la imagen inicial
      function cambia() {
        if(i>22){ var NumImagen = 0; i=1; } else { var NumImagen = i++; }
        var fotx =  document.getElementById("fotx").src=misImagenes[NumImagen];
 
        //Si la imagenes coinciden emite un Alerta
        if (foto==fotx) {alert("aca esta");}
      }
 
          window.onload=setInterval(cambia, 1500);
  
  </script>
 
</html>

viterr · #2 (**permalink**) 26/01/2014, 12:46

Queda claro lo que necesitas, me parece que no tendrías que preguntar por la etiqueta canvas en tu condicional ya que tu quieres saber si la Imagen cargada en Canvas2(Previa a guardarse en Canvas1) ya se encuentra en Canvas1(Suponiendo que es tu repositorio).

Podrías poner un poco de código por por favor para no seguir con mis suposiciones.

hcrisel · #3 (**permalink**) 26/01/2014, 13:48

Cita:

Iniciado por viterr

Queda claro lo que necesitas, me parece que no tendrías que preguntar por la etiqueta canvas en tu condicional ya que tu quieres saber si la Imagen cargada en Canvas2(Previa a guardarse en Canvas1) ya se encuentra en Canvas1(Suponiendo que es tu repositorio).

Podrías poner un poco de código por por favor para no seguir con mis suposiciones.

Gracias por ocuparte de mi... aquí ingrese otro modo de hacerlo directamente sin Canvas solo con <img>, pero de todos modos pasa de largo.

viterr · #4 (**permalink**) 27/01/2014, 14:49

Hola que tal ahora si entiendo un poco mas a ver si te sirve esto

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
 
 
</head>
 
<body>
<script type="text/javascript">
    var misImagenes = new Array(3);
    for (i=0; i<misImagenes.length;i++){
        misImagenes[i]= "img/0"+i+".jpg";
    }
    var contador = 0;
    
    
    window.onload = function(){
    
    
    cambiarImagen();
    }
    cambiarImagen = function(){
        var imgfija = document.getElementById('foto').src="img/02.jpg";
    if(contador == misImagenes.length){
        contador = 0;
    }
    
    var imgcambia = document.getElementById('fotx').src = misImagenes[contador];
    contador++;
    if(imgfija==imgcambia){
        alert('las imagenes son iguales');
        return;
    }
    setTimeout(cambiarImagen, 3000);
    
}
 
</script>
<body>
      <h1> Compara una imagen con otras cambiando cada 3 segundos</h1>
      <!-- Esta es la que busco -->
      <img id="foto" style="width:240px; heigth:120px;" src=""/>
      <!-- Esta es la lista de imagenes a comparar -->
      <img id="fotx" style="width:240px; heigth:120px;" src=""/>
  </body>
</body>
</html>

hcrisel · #5 (**permalink**) 27/01/2014, 16:44

Cita:

Iniciado por viterr

... un poco mas a ver si te sirve esto

GRACIAS papá!!! esta espectacular. No tengo idea como agradecer tanta molestia y tiempo. Pero para que veas que no me senté a esperar la solución (en este caso tuya). Te cuento que con mi inglés indio jaja. Encontré una Hermosa librería de nombre Resemble.js esta Espectacular, porque esta mañana leyendo acerca de este tema aprendí que cuando comparamos con ***.src estamos comparando Ubicación y Nombre del archivo.
Este Resemble no solo compara por tamaño sino además por contenido del archivo de una imagen con respecto a otra. Lo que lo hace mejor aún ya que de este modo no solo evito repetir una imagen sino que además evito repetir dos imagenes iguales con distinto nombre. Espero que se entienda lo que digo.
De todos modos con tu propuesta ya puedo seguir trabajando en mi proyecto. Te envío un gran abrazo desde mi ciudad a donde quiera que estés.

(Viste que seguí trabajando mientras tanto? jajaja)