Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211

    Istruzione ripetuta per avere ritaglio

    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>

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211
    Chiedo scusa per il “disordine” del codice. Forse questo è il motivo per cui non ho ottenuto risposte.
    Ho rivisto il perciò codice che riporto appresso, ho messo nomi più significativi ai pulsanti e alle funzioni, ma soprattutto ho lascate fisse le dimensioni del canvas dell’immagine origine e invece regolabili le dimensioni del canvas dell’immagine ritaglio, per ottenere così ingrandimenti a piacere, di dimensioni a piacere.
    Spero ora di avere un aiuto per il problema, già esposto, di ottenere direttamente il ritaglio cliccando sul pulsante “ritaglio”, invece di scegliere e caricare prima un’altra immagine qualsiasi e poi riscegliere e ricaricare l’immagine già scelta. 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; writing-mode: tb-rl; filter: flipv fliph;">
    <b>&nbsp file immagine origine</b>
    </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; writing-mode: tb-rl; filter: flipv fliph;">
    <b>&nbsp file immagine ritaglio</b>
    </div>
    
    
    <div id="sceltaFile" style="border: 2px  solid red; position: absolute; left:650px; top:10px; 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:150px; width: 400px; height:120px; 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>
    <input type="button" id"=button2" size=10 value="ritaglia" onclick="ritaglia()">
    </div>
    
    
    <div id="div4" style="border: 2px  solid red; position: absolute; left:650px; top:290px; width: 400px; height:40px; padding:5px"><br>
    <center>
    <input type="button" id"=button3"  value="cancella immagine" onclick="canc_imm()">
    <input type="button" id"=button4"  value="cancella ritaglio" onclick="canc_rit()">
    </center>
    </div>
    
    
    <div id="div5" style="border: 2px  solid red; position: absolute; left:650px; top:350px; width: 400px; height:98px; padding:5px"><br>
    dimensione quadro ritaglio:<br>
       larghezza in px: <input type="text" id="larghezzaR" size=10 value=610><br>
       altezza in px: <input type="text" id="altezzaR" size=10 value=450>
    <input type="button" id"button5" size=10 value="OK5" onclick="OK5()"><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("sceltaFile").innerHTML+="<br>"+img.width+" "+img.height
                }
            })
    
    
    function ritaglia() {
    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;
    arpx.value=newHeight;
    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 OK5() {
    lavagnaR.width=larghezzaR.value*1+10;
    lavagnaR.height=altezzaR.value*1;
    div_lavagnaR.style.left=(larghezzaR.value*1)+"px";
    div_lavagnaR.style.height=(altezzaR.value*1)+"px";
    document.getElementById("div_lavagnaR").innerHTML+="<b>- Dimensione quadro: " +(lavagnaR.width-10)+ "x" +(lavagnaR.height) +"</b>";
    }
    
    
    function canc_imm(){
    ctx.clearRect(0, 0, c.width, c.height);
    }
    
    
    function canc_rit(){
    crtx.clearRect(0, 0, cr.width, cr.height);
    }
    </script>
    </body>
    </html>

  3. #3
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,660
    Ciao, senza alcuna offesa, trovo il sistema molto artigianale e poco "amichevole" (poco pratico nell'utilizzo).
    A parte il problema descritto, noto diversi altri problemi nella logica di funzionamento.

    Prima di andare a cercare di risolvere, vorrei capire meglio il contesto e il reale tuo obiettivo.
    Se si tratta di un "esercizio", o qualcosa del genere, a scopo di studio personale, posso capire la decisione di aggiustare quello script.
    Se invece intendi ottenere uno strumento ottimale da usare poi nella pubblicazione di qualche tuo progetto, sarebbe forse più pertinente cercare qualcosa di già pronto.

    In quest'ultimo caso potrei consigliarti di effettuare qualche ricerca del tipo "javascript image cropper plugin"; con una opportuna cernita potrai trovare diversi plugin/snippet personalizzabili da includere nei tuoi elaborati.
    Non so se per te possa essere una valida alternativa. Fai sapere.
    Prova Forum HTML.it Toolset per una fruizione ottimale del Forum

    In arrivo Forum HTML.it Toolset v1.3.0 con nuove funzionalità

  4. #4
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211
    Grazie per la risposta Killerworm. Hai ragione: programmo in modo artigianale.
    Programmo per il gusto di programmare e vedere riuscire i codici.
    Il codice che riporto è anche sicuramente poco amichevole perchè è un po' complicato scrivere le coordinate del ritaglio dell'immagine e della sua destinazione e dimensione.
    Per questo motivo penso di cambiare il codice per scrivere le coordinate di origine e dimensione del ritaglio, usando il mouse come nei programmi professionali.
    Così com'è il codice funziona, solo che per ottenere il ritaglio non basta cliccare sul pulsante "ritaglia", ma si deve cliccare una seconda volta sul pulsante "scegli il file" per ricaricare l'immagine e desideravo sapere come si può ovviare.Grazie


    lanvoel

  5. #5
    Moderatore di Programmazione L'avatar di alka
    Registrato dal
    Oct 2001
    residenza
    Reggio Emilia
    Messaggi
    24,281
    Quote Originariamente inviata da lanvoel Visualizza il messaggio
    Hai ragione: programmo in modo artigianale.
    Io non userei l'aggettivo "artigianale": di solito richiama qualcosa di professionale e realizzato con una certa disciplina, come fanno appunto gli artigiani.

    Quote Originariamente inviata da lanvoel Visualizza il messaggio
    Programmo per il gusto di programmare e vedere riuscire i codici.
    Questo suggerisce un approccio "a tentativi": si scrive del codice e si danno martellate fino a quando non funziona.
    Purtroppo è necessaria invece molta precisione, e nel caso in esame anche una certa inclinazione all'ordine.

    Quote Originariamente inviata da lanvoel Visualizza il messaggio
    Il codice che riporto è anche sicuramente poco amichevole perchè è un po' complicato scrivere le coordinate del ritaglio dell'immagine e della sua destinazione e dimensione.
    Riprendendo quanto ho scritto sopra, qui infatti il problema principale è che tu hai scritto tutto di getto, come un fiume di righe sequenziali, senza creare funzioni, oggetti, in breve una architettura che possa dare un ordine al tuo codice.

    Ciò rende difficile darti una mano, a meno di non mettersi lì a testa bassa a osservare riga per riga quello che hai scritto, magari riproducendo il programma sul proprio PC o da qualche altra parte, perché altrimenti risulta difficile capire nel marasma generale dove si annida la problematica che denunci.

    Quote Originariamente inviata da lanvoel Visualizza il messaggio
    Così com'è il codice funziona, solo che per ottenere il ritaglio non basta cliccare sul pulsante "ritaglia", ma si deve cliccare una seconda volta sul pulsante "scegli il file" per ricaricare l'immagine e desideravo sapere come si può ovviare.
    Io farei un refactoring del tuo codice, ossia troverei il modo di strutturarlo e dividerlo meglio, separando le routine e le responsabilità di ciascuna parte in funzioni o in altri costrutti, dando più ordine al tutto: molto probabilmente, nel fare questo, troverai anche la causa del problema che stai riscontrando.
    MARCO BREVEGLIERI
    Software and Web Developer, Teacher and Consultant

    Home | Blog | Delphi Podcast | Twitch | Altro...

  6. #6
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    5,660
    Quote Originariamente inviata da lanvoel
    Programmo per il gusto di programmare e vedere riuscire i codici.
    Ottimo, e questo ci sta tutto ma anche senza reinventare l'acqua calda potresti appoggiarti o prendere spunto da script già esistenti con cui ottenere questa funzionalità in modo più ottimale.

    Quote Originariamente inviata da lanvoel
    per ottenere il ritaglio non basta cliccare sul pulsante "ritaglia"
    Le tue indicazioni erano chiare. Avevo già analizzato il tuo codice e visto anche già come "correggerlo".

    Come anticipato, non ti nego che sia un bel garbuglio di errori logici e strutturali. A mio modesto parere sarebbe meglio buttare giù tutto e rifarlo da capo con criterio.

    Cerco comunque di spiegarti i punti cruciali, sempre che riesca a farmi capire

    Inizialmente hai dichiarato la costante selectPhoto che fa riferimento all'elemento input #photo e gli hai impostato la gestione dell'evento change.
    codice:
    const selectPhoto = document.getElementById('photo');
    selectPhoto.addEventListener('change', ...
    Questa costante è globale perché l'hai definita nel livello principale dello script; quindi è accessibile in qualsiasi punto dello script. Fino a qui tutto ok.

    Per il change hai applicato una funzione (listener) dove definisci l'oggetto img che fa riferimento all'elemento immagine da elaborare.

    Tieni conto che la variabile img l'hai definita localmente dentro questo listener; questo significa che NON è accessibile al di fuori di tale funzione.

    Poi hai impostato l'onclick per il pulsante ritaglia, che richiama la relativa funzione ritaglia().

    Ora, dentro questa funzione, la costante selectPhoto (quella definita a livello globale) sarebbe anche visibile ed accessibile per ottenere il riferimento a quell'elemento #photo. Oltretutto l'evento change è già stato impostato inizialmente. Tuttavia non puoi accedere direttamente alla variabile img (che hai definito nel primo listener) dal momento che l'hai definita localmente dentro il listener.

    L'errore sta nel fatto che dentro ritaglia() hai ridefinito tutto ciò che avevi già definito inizialmente: un'altra costante selectPhoto per quello stesso elemento e a cui vai ad impostare nuovamente il change con un nuovo listener in cui dentro hai una nuova variabile img locale.

    Ogni volta che il pulsante ritaglia viene premuto, non fai altro che aggiungere una ulteriore gestione del change per la quale viene appunto atteso questo evento prima di procedere all'elaborazione attraverso la sua funzione listener.

    Ci sono 3 principali errori logici da prendere in considerazione:

    1 - la gestione del change non devi ridefinirla dentro ritaglia() ma "sfruttare" quella stessa che hai definito già a livello globale per ottenere in qualche modo il riferimento all'oggetto immagine che viene "selezionato" inizialmente.
    2 - ridefinendo l'evento change dentro ritaglia() (che di per sé è comunque già sbagliato) viene attribuito un relativo listener che non vai però a rimuovere. Per cui, non solo devi riselezionare l'immagine, ma tali listener (aggiunti e mai rimossi) vanno a sommarsi man mano, ogni volta che si preme il pulsante ritaglia, creando quindi una catena di esecuzione molteplice dello stesso script presente nel listener stesso.
    3 - la variabile img dentro il listener iniziale, è definita localmente; in questo modo non puoi accederci per analizzare quell'oggetto immagine che già è stato selezionato inizialmente.

    In breve, non devi ridefinire la gestione del change dentro ritaglia(); piuttosto dovresti definire la variabile img a livello globale in modo che lo stesso oggetto immagine (definito con la selezione inizialmente) possa risultare accessibile anche dentro la funzione ritaglia().

    Tra le altre cose, dentro ritaglia, vedo che non ripulisci il canvas crtx prima di ridisegnare l'immagine. Questo va a sovrapporre man mano i ritagli. Forse dovresti pulirlo come hai fatto per ctx.

    Qui le correzioni che ho potuto apportare allo script:
    codice:
    const c = document.getElementById("lavagna");
    const ctx = c.getContext("2d");
    const cr = document.getElementById("lavagnaR");
    const crtx = cr.getContext("2d");
    let ratio = null;
    let img = new Image(); // Questo oggetto, definito a livello globale, può essere visto in qualsiasi punto dello script
    
    const selectPhoto = document.getElementById('photo');
    selectPhoto.addEventListener('change', (e) => {
      let url = URL.createObjectURL(e.target.files[0]);
      // Qui viene definita l'immagine selezionata
      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;
        }
        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);
        lpx.value = img.width;
        apx.value = img.height;
        lrpx.value = newWidth;
        arpx.value = newHeight;
      }
    })
    
    function ritaglia() {
      let ratio = null;
      // Qui non hai bisogno di reimpostare il sistema di selezione dell'immagine ma puoi riferirti direttamente all'oggetto "img" globale
      const
        oix1 = document.getElementById('oix').value,
        oiy1 = document.getElementById('oiy').value,
        lx1 = document.getElementById('lx').value,
        ay1 = document.getElementById('ay').value,
        oidx1 = document.getElementById('oidx').value,
        oidy1 = document.getElementById('oidy').value,
        ldx1 = document.getElementById('ldx').value,
        ady1 = document.getElementById('ady').value
      ;
      crtx.clearRect(0, 0, cr.width, cr.height); // Anche qui, come sopra, andrà ripulito il relativo canvas prima di ridisegnarci l'immagine
      crtx.drawImage(img, oix1, oiy1, lx1, ay1, oidx1, oidy1, ldx1, ady1);
    }
    Ho commentato i punti salienti.

    Spero sia tutto chiaro. Fai sapere.


    [EDIT]
    PS: chiaramente quoto in toto alka
    Ultima modifica di KillerWorm; 09-11-2023 a 14:15
    Prova Forum HTML.it Toolset per una fruizione ottimale del Forum

    In arrivo Forum HTML.it Toolset v1.3.0 con nuove funzionalità

  7. #7
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    211
    Grazie KillerWorm per le dettagliate, chiare e approfondite spiegazioni.
    Bisognava definire
    let img = new Image();
    a livello globale per potere utilizzare l'immagine anche nella funzione ritaglia(), che quindi si riduce al codice sottostante

    lanvoel

    codice:
    function ritaglia() {
    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
    }

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.