Ho ripreso a lavorare su questo programma per elaborare le immagini, in particolare per avere ritagli.
Cliccando sul pulsante “scegli il file”, si naviga e si carica una immagine e vengono evidenziate larghezza e altezza in px del file immagine origine e anche larghezza e altezza in px del file immagine mostrato.
Prima di cliccare sul pulsante OK3 si scelgono origine e dimensione del ritaglio basandosi sulle dimensioni del file immagine origine e si scelgono origine o dimensione del ritaglio mostrato basandosi sulle dimensioni del file immagine mostrato.
Ma cliccando sul pulsanteOK3, non si ha subito il ritaglio,ma si deve prima caricare un’altra immagine qualsiasi (lasciando immutate tutte scelte per il ritaglio) e poi ricaricare una seconda volta l’immagine di cui si vuole i ritaglio già scelto in precedenza.
Perché questo comportamento? Come si può ottenere il ritaglio al primo clic sul pulsante OK3?
Grazie
lanvoel

codice:
<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>


</head>


<body>
    <canvas id="lavagna" width="600" height="450" style="border: 2px solid red;"></canvas><br>
<div id="div_lavagna" style="border: 2px  solid red; position: absolute; left:610px; top:8px; width: 20px; height:448px; padding:1px; background:cyan"><br>
<style type="text/css">
td{
    text-align: center;
    font-size: 14px;
    font-family: verdana;}
td.verticale{
    writing-mode: tb-rl;
    filter: flipv fliph;}
</style>
<table border=0">
<tr>
<td class="verticale"><b>file immagine origine</b></td>
</tr>
</table>
</div>
    <canvas id="lavagnaR" width="600" height="450" style="border: 2px solid red;"></canvas><br>
<div id="div_lavagnaR" style="border: 2px  solid red; position: absolute; left:610px; top:466px; width: 20px; height:448px; padding:1px; background:yellow"><br>
<style type="text/css">
td{
    text-align: center;
    font-size: 14px;
    font-family: verdana;}
td.verticale{
    writing-mode: tb-rl;
    filter: flipv fliph;}
</style>
<table border=0">
<tr>
<td class="verticale"><b>file immagine ritaglio</b></td>
</tr>
</table>
</div>
<div id="div1" style="border: 2px  solid red; position: absolute; left:650px; top:10px; width: 400px; height:90px; padding:5px"><br>
   larghezza: <input type="text" id="larghezza" size=10 value=600><br>
   altezza: <input type="text" id="altezza" size=10 value=450><br>
   <input type="button" id"button1" size=10 value="OK1" onclick="OK1()"><br>
</div>


<div id="div2" style="border: 2px  solid red; position: absolute; left:650px; top:120px; width: 400px; height:120px; padding:5px"><br>
    <input type="file" name="photo" accept="image/*" id="photo"><br>
    dimensioni file immagine origine:<br>
    larghezza in px: <input type="text" id="lpx" size =5>
    altezza in px: <input type="text" id="apx" size =5>
    dimensioni file immagine mostrato: <br>
    larghezza in px: <input type="text" id="lrpx" size =5>
    altezza in px: <input type="text" id="arpx" size =5>
</div>


<div id="div3" style="border: 2px  solid red; position: absolute; left:650px; top:260px; width: 400px; height:150px; padding:5px"><br>
origine ritaglio: <input type="text" id="oix" size=5 value=0><input type="text" id="oiy" size=5 value=0><br>
scrivi dimensioni ritaglio: <input type="text" id="lx" size=5 value=2000><input type="text" id="ay" size=5 value=2000><br><br>
destinazione ritaglio: <input type="text" id="oidx" size=5 value=0><input type="text" id="oidy" size=5 value=0><br>
nuova dimensione ritaglio: <input type="text" id="ldx" size=5 value=450><input type="text" id="ady" size=5 value=450><br>
<input type="button" id"=button2" size=10 value="OK3" onclick="OK3()">
</div>


<div id="div4" style="border: 2px  solid red; position: absolute; left:650px; top:430px; width: 400px; height:130px; padding:5px"><br>
Cancella immagine origine:<br>
<input type="button" id"=button3"  value="cancella immagine" onclick="canc_imm()"><br><br>
Cancella immagine ritaglio:<br>
<input type="button" id"=button4"  value="cancella ritaglio" onclick="canc_rit()"><br>
</div>
    <script>
        const c = document.getElementById("lavagna");
        const ctx = c.getContext("2d");
            const cr = document.getElementById("lavagnaR");
            const crtx = cr.getContext("2d");
        let ratio = null;
        const selectPhoto = document.getElementById('photo'); // seleziona una foto
        selectPhoto.addEventListener('change', (e) => {      //all'evento change ,  esegue tutto il blocco eventEndler ({----})
            let img = new Image();
            let url = URL.createObjectURL(e.target.files[0]);  // crea un collegamento (url) per l'immagine
            img.src = url;


            img.onload = () => {
                (img.width > img.height)
                    ? ratio = img.width / c.width
                    : ratio = img.height / c.height // calcola il rappaorto  tra le misure dell'immagine e del canvas
let newWidth;
let newHeight;
if (ratio <=1){
newWidth = img.width;  
newHeight = img.height; // calcola le nuove dimensioni dell'immagine
}else {
newWidth = img.width / ratio;  
newHeight = img.height / ratio; // calcola le nuove dimensioni dell'immagine 
}
                const x = (c.width - newWidth) / 2;
                const y = (c.height - newHeight) / 2;


                ctx.clearRect(0, 0, c.width, c.height);
                ctx.drawImage(img, x, y, newWidth, newHeight);
                URL.revokeObjectURL(url); //Rilascia l'url dell'immagine;
                //selectPhoto.value = ""
lpx.value=img.width;
apx.value=img.height;
lrpx.value=newWidth;
arpx.value=newHeight;
//document.getElementById("div2").innerHTML+="<br>"+img.width+" "+img.height
            }
        })
function OK1() {
lavagna.width=larghezza.value*1+10;
lavagna.height=altezza.value*1;
div1.style.left=(larghezza.value*1+40)+"px";
div1.style.top=10+"px";
div2.style.left=(larghezza.value*1+40)+"px";
div2.style.top=120+"px";
div3.style.left=(larghezza.value*1+40)+"px";
div3.style.top=260+"px";
div4.style.left=(larghezza.value*1+40)+"px";
div4.style.top=430+"px";
div_lavagna.style.left=(larghezza.value*1)+"px";
div_lavagna.style.top=8+"px";
}




function OK3() {
let ratio = null;
        const selectPhoto = document.getElementById('photo') // seleziona una foto
        selectPhoto.addEventListener('change', (e) => {      //all'evento change ,  esegue tutto il blocco eventEndler ({----})
            let img = new Image();
            let url = URL.createObjectURL(e.target.files[0]);  // crea un collegamento (url) per l'immagine
            img.src = url;


            img.onload = () => {
                (img.width > img.height)
                    ? ratio = img.width / c.width
                    : ratio = img.height / c.height // calcola il rappaorto  tra le misure dell'immagine e del canvas
let newWidth;
let newHeight;
if (ratio <=1){
newWidth = img.width;  
newHeight = img.height; 
}else {
newWidth = img.width / ratio;  
newHeight = img.height / ratio; // calcola le nuove dimensioni dell'immagine 
}
                const x = (c.width - newWidth) / 2;
                const y = (c.height - newHeight) / 2;


                ctx.clearRect(0, 0, c.width, c.height);
                ctx.drawImage(img, x, y, newWidth, newHeight);
                URL.revokeObjectURL(url) //Rilascia l'url dell'immagine;
                //selectPhoto.value = ""
lpx.value=img.width;
apx.value=img.height;
lrpx.value=newWidth;


var oix1=document.getElementById('oix').value; var oiy1=document.getElementById('oiy').value;
    var lx1=document.getElementById('lx').value;var ay1=document.getElementById('ay').value;
var oidx1=document.getElementById('oidx').value; var oidy1=document.getElementById('oidy').value;
    var ldx1=document.getElementById('ldx').value; var ady1=document.getElementById('ady').value;
crtx.drawImage(img,oix1,oiy1,lx1,ay1,oidx1,oidy1,ldx1,ady1);// immagine ritaglio
            }
        })
}


function canc_imm(){
ctx.clearRect(0, 0, c.width, c.height);
}


function canc_rit(){
crtx.clearRect(0, 0, c.width, c.height);
}
</script>
</body>
</html>