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

    Salvare un'immagine con Canvas

    Con questo codice carico l'immagine "1980.jpg" e opero un ritaglio.
    codice:
    <!doctype html>
    <html>
    <body>
    <canvas id="tela" width="600" height="388" Style="border: 2px solid red;">
    </canvas>
    <input type="button" value="carica image" onclick="carica()">
    <input type="button" value="cancella image" onclick ="cancella()">
    <input type="button" value="elabora image" onclick="elabora()">
    <input type="button" value="salva image " onclick="salva()">
    
    
    <br>origine e dimensione ritaglio: <input type="text" id="oix" size=5 value=100><input type="text" id="oiy" size=5 value=100><input type="text" id="lx" size=5 value=100><input type="text" id="ay" size=5 value=100><br>
    <br>destinazione e nuova dimensione: <input type="text" id="oidx" size=5 value=100><input type="text" id="oidy" size=5 value=100><input type="text" id="ldx" size=5 value=100><input type="text" id="ady" size=5 value=100><br>
    <script>
    var c=document.getElementById("tela");
    var ctx=c.getContext("2d");
    
    
    function carica() {
    var img=new Image;
     img.src = '1980.jpg'; // immagine da eleborare
     img.onload = function() {
       ctx.drawImage(img,4,4);
     }
    }
    
    
    function cancella() {
    var img=new Image;
     img.src = 'vuota.jpg'; // immagine vuota bianca
     img.onload = function() {
       ctx.drawImage(img,4,4);
     }
    }
    
    
    function elabora() {
     var img=new Image;
     img.src = '1980.jpg';
    var oix1=oix.value*1; var oiy1=oiy.value*1; var lx1=lx.value*1; var ay1=ay.value*1;
    var oidx1=oidx.value*1; var oidy1=oidy.value*1; var ldx1=ldx.value*1; var ady1=ady.value*1;
    ctx.drawImage(img,oix1,oiy1,lx1,ay1,oidx1,oidy1,ldx1,ady1);// immagine ritaglio
    }
    
    
    function salva()
    {
        var mia_immagine    = c.toDataURL("image/jpg", 1.0);
        document.write('<img src="'+mia_immagine+'"/>');
    }
    </script>
    </body>
    </html>
    Ho due difficoltà.
    1) Ho cercato di salvare questo ritaglio con l'istruzione toDataURL() che qui non funziona, mentre funziona per salvare i grafici realizzati con Canvas. Quindi, come devo fare per salvare le immagini?
    2) Ho cercato di cancellare una immagine con l'istruzione clearRect() che cancella i grafici realizzati con Canvas, ma qui, anche questa istruzione non funziona. Ho ovviato caricando l'immagine "vuota.jpg" che è un'immagine bianca, ma desiderei sapere se c'è un'istruzione apposita. Ringraziando per il vostro aiuto

    lanvoel

  2. #2
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    180
    Al codice ho aggiunto un pulsante cha lancia la funzione disegni() che disegna un rettangolo di contenuto giallo e bordo verde. Cliccando sul pulsante salva , si ha una pagina con l'immagine e cliccando col pulsante destro "salva con il nome", salva con estensione .png o, se si vuole, in .jpg o altra. Perché, invece, se si carica un'immagine e la si elabora, per esempio facendo un ritaglio e si clicca sullo stesso pulsante salva, non avviene nulla e l'immagine non viene salvata, pur avendo estensione .png o .jpg?
    Spero di avere una risposta e, possibilmente, una soluzione perché desidererei proseguire nell'elaborazione delle immagini. Grazie

    lanvoel

    codice:
    <!doctype html>
    <html>
    <body>
    <canvas id="tela" width="600" height="388" Style="border: 2px solid red;">
    </canvas>
    
    
    <div id="div1" style="border: 2px  solid red; position: absolute; left:650px; top:20px;">
    <input type="button" value="carica image" onclick="carica()"><br>
    <input type="button" value="cancella image" onclick ="cancella()"><br>
    <input type="button" value="elabora image" onclick="elabora()"><br>
    <input type="button" value="salva image " onclick="salva()"><br><br>
    <input type="button" value="disegni canvas" onclick="disegni()"><br>
    </div>
    
    
    <br>origine e dimensione ritaglio: <input type="text" id="oix" size=5 value=100><input type="text" id="oiy" size=5 value=100><input type="text" id="lx" size=5 value=100><input type="text" id="ay" size=5 value=100><br>
    <br>destinazione e nuova dimensione: <input type="text" id="oidx" size=5 value=100><input type="text" id="oidy" size=5 value=100><input type="text" id="ldx" size=5 value=100><input type="text" id="ady" size=5 value=100><br>
    <script>
    var c=document.getElementById("tela");
    var ctx=c.getContext("2d");
    
    
    function carica() {
    var img=new Image;
     img.src = '1980.jpg'; // immagine da eleborare
     img.onload = function() {
       ctx.drawImage(img,4,4);
     }
    }
    
    
    function cancella() {
    var img=new Image;
     img.src = 'vuota.jpg'; // immagine vuota bianca
     img.onload = function() {
       ctx.drawImage(img,4,4);
     }
    }
    
    
    function elabora() {
     var img=new Image;
     img.src = '1980.jpg';
    var oix1=oix.value*1; var oiy1=oiy.value*1; var lx1=lx.value*1; var ay1=ay.value*1;
    var oidx1=oidx.value*1; var oidy1=oidy.value*1; var ldx1=ldx.value*1; var ady1=ady.value*1;
    ctx.drawImage(img,oix1,oiy1,lx1,ay1,oidx1,oidy1,ldx1,ady1);// immagine ritaglio
    }
    
    
    function salva()
    {
        var mia_immagine    = c.toDataURL("image/jpg", 1.0);
        document.write('<img src="'+mia_immagine+'"/>');
    }
    
    
    function disegni() {
    ctx.rect(20,20,200,100);
    ctx.fillStyle="yellow";
    ctx.strokeStyle="green";
    ctx.lineWidth=5;
    ctx.fill();
    ctx.stroke();
    }
    </script>
    </body>
    </html>

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    180
    La prima difficoltà risolta.
    Riprovando il mio codice mi sono accorto che l'istruzione

    mia_immagine = c.toDataURL("image/jpg", 1.0);
    funziona con qualsiasi immagine, sia creata con canvas che non, basta, dopo averla lanciata con il pulsante "salva image", fare clic destro sull'immagine contenuta nel canvas sullo schermo e scegliere "salva immagine con nome".
    Resta la secoda difficoltà, ma penso però che la soluzione che ho usata dell'immagine bianca, possa essere anche una soluzione accettabile.
    Grazie e un saluto

    lanvoel

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 © 2021 vBulletin Solutions, Inc. All rights reserved.