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!