0

El código trata que dibuje en el canvas la imagen que selecciono con el input, pero resulta que en el código que tengo, la primera vez que introduzco una imagen funciona pero la cuando vuelvo a seleccionar otra foto en el input file, ya no funciona el onchange.

Código HTML:

 <canvas id="cv01" onclick="document.getElementById('imgn').click();"> </canvas>
<footer>
    <button onclick="document.getElementById('imgn').click();">Seleccionar imagen</button>
    <input type="file" name="img" id="imgn" accept="image/*" onchange="imagen(); cambiarBotones();"> <br>
</footer>

<canvas id="cv02"></canvas>
<footer>
    <label>Dificultad: </label>
    <select id="dificultad" onchange="lineas();">
        <option value="facil">Fácil</option>
        <option value="medio">Medio</option>
        <option value="dificil">Difícil</option>
      </select>
      <input type="color" id="color" onchange="lineas();">
      <button disabled="disabled" id="start" onclick="empezar();">Empezar</button>
      <button disabled="disabled" id="end" onclick="terminar();">Terminar juego</button>
      <button disabled="disabled" id="ayuda" >Ayuda</button>
      <div id='seconds-counter'> </div>

</footer>

Código JS:

  function imagen(){
let cv = document.querySelector('#cv01'),
    cv02 = document.querySelector('#cv02'),
    ctx = cv.getContext('2d'),
    ctx2 = cv02.getContext('2d'),
    img=new Image(); //img es un objeto de js

imagen= document.getElementById("imgn");
var curFile = imagen.files[0];
img.src = window.URL.createObjectURL(curFile);

img.onload = function(){
    //ctx.drawImage(img,0,0);
    ctx.drawImage(img,0,0, cv.width, cv.height); //Para que tenga el tamano maximo del canvas
    ctx2.drawImage(img,0,0,cv01.width, cv01.height);
    lineas();
}
_IMG_=img;
//imagen.value = "";  limpiar el input }



function lineas(){
    let cv = document.querySelector('#cv02'),
    ctx = cv.getContext('2d'),
    inp = document.getElementById('dificultad').value,
    color = document.getElementById('color').value;


if(inp =='facil'){
    r=3;
}
else if(inp =='medio'){
    r=6;
}
else if(inp == 'dificil'){
    r=8;
}
piezaCanvasHeight=_ALTO_/r;
piezaCanvasWidth = _ANCHO_/r;
let dimv = cv.width/r,
    dimh = cv.height/r;

ctx.clearRect(0, 0,360,240);//Reiniciar canvas
copiar();   //Copiar la imagen del canvas 1 

//Empezar a dibujar lineas
ctx.beginPath();
ctx.lineWidth=2;
ctx.strokeStyle=color;

    for(let i=0; i<=r; i++){
        //lineas verticales
        ctx.moveTo(i*dimv,0);
        ctx.lineTo(i*dimv,cv.height);
        //lineas horizontales
        ctx.moveTo(0,i*dimh);
        ctx.lineTo(cv.width,i*dimh);
        ctx.stroke();
    }

}

function cambiarBotones(){
    start.disabled=false;
    start.style.background="rgba(255, 255, 0)";
}

Este es el error que me sale en la consola:

Uncaught TypeError: imagen is not a function at HTMLInputElement.onchange ((index):24)

Gracias!

2
  • ¿Puedes añadir el código completo? Por lo que veo no has puesto el canvas #cv02 ni definido las funciones lineas() y cambiarBotones()
    – Kiko_L
    el 8 jun. 2018 a las 10:22
  • No creo que sea necesario, pero bueno lo añado por si acaso
    – RaulJ
    el 8 jun. 2018 a las 10:33

1 respuesta 1

2

El error está en la función en sí:

function imagen(){
  let cv = document.querySelector('#cv01'),
    cv02 = document.querySelector('#cv02'),
    ctx = cv.getContext('2d'),
    ctx2 = cv02.getContext('2d'),
    img=new Image(); //img es un objeto de js

  imagen= document.getElementById("imgn");
    ...
}

Defines una función imagen: correcto, aunque no es un buen nombre, falta el verbo (qué hace la función).

Dentro de la función defines un grupo de variables con let, pero cometes un fallo: después de img hay un un punto y coma (;), con lo que imagen no es una variable local, sino la función en sí. Así que tras ejecutarse la función por primera vez, imagen deja de ser una función para ser el valor de document.getElementById("imgn"), que no es una función.

La solución es quitar el punto y coma y poner una coma, pero aparte podrías:

  • renombrar la función a algo más descriptivo.
  • añadir 'use strict'; al inicio de la misma para que el compilador pueda detectar posibles errores similares.
1
  • Eso era! Muchas gracias, solo tenía que cambiar el nombre de la función!
    – RaulJ
    el 8 jun. 2018 a las 10:55

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.