caricare immagini da tastiera in <canvas>

**lanvoel** · 18-03-2023, 11:44

Desidererei sapere come si fa per caricare un file immagine in un contenitore <div> o <canvas> da tastiera, cioè navigando tra le carlelle fino a raggiungere il file immagine e cliccarci sopra.
Sul web ho trovato solo come si carica scrivendo il nome del file immagine nel codice, come qui sotto:

codice:

<!doctype html>
<html>
<body>
<canvas id="tela" width="600" height="388" Style="border: 2px solid red;"></canvas>
<script>
var c=document.getElementById("tela");
var ctx=c.getContext("2d");
var img=new Image();
img.src="nomefile.jpg";
img.onload=function() {
ctx.drawImage(img,0,0);
}
</script>
</body>
</html>

Ma questo metodo non permette di lavorare sulle immagini in generale, obbligando a intervenire ogni volta nel codice per scriverci il nome del file immagine che si vuole caricare.
Grazie

lanvoel

**Vincent.Zeno** · 18-03-2023, 13:47

qui un esempio esaustivo:
https://howto.webarea.it/javascript/...javascript_198

**ninja72** · 18-03-2023, 16:36

Due modi di gestire la cosa.

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>
    <style>
        #preview {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }

        #preview>img {
            width: inherit;
            height: inherit;
        }
    </style>
</head>

<body>

    <div id="preview">
        <img src="#" alt="preview">
    </div>
    <label for="photo">API FileReader()</label>
    <input type="file" name="photo" accept="image/*" id="photo">
    <br>
    <label for="photo2">URL.createObjectURL()</label>
    <input type="file" name="photo2" accept="image/*" id="photo2">

    <script>
        const selectPhoto = document.getElementById('photo')
        const selectPhoto2 = document.getElementById('photo2')
        const previewImg = document.querySelector('#preview>img')
        // API FileReader()
        // - Tramite il metodo readAsDataURL() viene creata in modo asincrono un
        // dato con codifica a base64, che in questo caso rappresenta l'immagine (dall'input).
        // Tramite la proprietà "onload" possiamo gestire il dato da passare al tag html image.src
        // - Gestisce automanticamente la memoria tramite garbage collector
        selectPhoto.addEventListener('change', (e) => {
            const reader = new FileReader()
            reader.readAsDataURL(e.target.files[0])
            reader.onload = () => {
                previewImg.src = reader.result
            }
        })
        // URL.createObjectURL() 
        // - Creata in modo sincrono un hash per la rappresentazione dell'immagine
        // - Necessità del metodo revokeObjectURL() per ripulire la memoria
        selectPhoto2.addEventListener('change', (e) => {
            const url = URL.createObjectURL(e.target.files[0])
            previewImg.src = url
            URL.revokeObjectURL(url)
        })
    </script>
</body>

</html>

**lanvoel** · 19-03-2023, 11:31

Grazie Vincent.Zeno e ninja72. I condici da voi inviati o indicati caricano le fote nel contenitore <div>, ma io sto lavotrando con <canvas> e ho bisogno di caricarele immagini in <canvas>.
Quali modifiche si devono apportare ai vostri codici perché carichino le immagini in <canvas> anziché in <div>? Ho provato a fare qualche modifica, ma le mie competenze sono limitate e non ho ottenuto risultati.
Grazie ancora

lanvoel

**ninja72** · 19-03-2023, 21:03

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>
    <style>
        #canvas {
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
    </style>
</head>

<body>

    <canvas id="canvas"></canvas>
    <br>
    <label for="photo">Canvas</label>
    <input type="file" name="photo" accept="image/*" id="photo">

    <script>
        const selectPhoto = document.getElementById('photo')
        const canvas = document.getElementById("canvas")

        const cx = canvas.getContext("2d")
        cx.width = 300
        cx.height = 300
        selectPhoto.addEventListener('change', (e) => {
            const img = new Image()
            const url = URL.createObjectURL(e.target.files[0])
            img.src = url

            img.onload = () => {
                let imageWidth = img.width
                let imageHeight = img.height
                let cWidth = cx.width
                let cHeight = cx.height

                let ratio = Math.min((cx.width / img.width), (cx.height / img.height))
                let newWidth = img.width * ratio
                let newHeight = newWidth / 2
                cx.clearRect(0, 0, cx.width, cx.height)
                cx.drawImage(img, 0, 0, img.width, img.height, 0, 0, newWidth, newHeight)
                URL.revokeObjectURL(url)
            }
        })

    </script>
</body>

</html>

**lanvoel** · 20-03-2023, 19:27

Grazie ninja72 per avermi risolto il problema con l'utilissimo codice che mi hai inviato.
Siccome le immagini non risultanavano proporzionate ho correto le righe che calcolano la "ratio".
Ho poi cercato di semplificare l'oggetto <canvas> mettendo tutti gli attributi nella riga

riga1: <canvas id="tela" width="800" height="600" style="border: 2px solid red;"></canvas>

ma non capisco perché le due righe seguenti:
cx.width = 800 // si dovrebbe eliminare
cx.height = 600 // si dovrebbe eliminare
non si possono eliminare essendo questi attributi contenuti nella riga1
Grazie ancora

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="tela" width="800" height="600" style="border: 2px solid red;"></canvas>
    <br>
    <label for="photo">Canvas</label>
    <input type="file" name="photo" accept="image/*" id="photo">


<script>
    let ratio=1;
        const selectPhoto = document.getElementById('photo')
        var c = document.getElementById("tela")
        var cx = c.getContext("2d")
        cx.width = 800    // si dovrebbe eliminare
        cx.height = 600   // si dovrebbe eliminare
      selectPhoto.addEventListener('change', (e) => {
            const img = new Image()
            const url = URL.createObjectURL(e.target.files[0])
            img.src = url


      img.onload = () => {
      if (img.width >img.height) {
      ratio=img.width/cx.width
      }
      else {
      ratio=img.height/cx.height
      }
                let newWidth = img.width / ratio
                let newHeight = img.height / ratio
                cx.clearRect(0, 0, cx.width, cx.height)
                cx.drawImage(img, 0, 0, newWidth, newHeight)
                URL.revokeObjectURL(url)
       }
       })
</script>
</body>
</html>

**ninja72** · 21-03-2023, 12:16

Figurati, comunque riguardando meglio il codice, si poteva utilizzare larghezza e altezza della canvas stessa.
ps. ora le immagini sono centrate al contenitore canvas.

codice:

        let ratio = null
        const selectPhoto = document.getElementById('photo')
        const c = document.getElementById("tela")
        const cx = c.getContext("2d")
        selectPhoto.addEventListener('change', (e) => {
            const img = new Image()
            const url = URL.createObjectURL(e.target.files[0])
            img.src = url

            img.onload = () => {
                (img.width > img.height)
                    ? ratio = img.width / c.width
                    : ratio = img.height / c.height

                let newWidth = img.width / ratio
                let newHeight = img.height / ratio

                const x = (c.width - newWidth) / 2
                const y = (c.height - newHeight) / 2

                cx.clearRect(0, 0, c.width, c.height)
                cx.drawImage(img, x, y, newWidth, newHeight)
                URL.revokeObjectURL(url)
            }
        })

**lanvoel** · 21-03-2023, 13:03

Ancora grazie ninja72, anche per l'ultima risposta

lanvoel

**lanvoel** · 05-04-2023, 18:13

ninya72, grazie ancora per l'ultima correzione. Ora sto lavorando per realizzare un programma personale per elaborare le immagini a partire dal tuo ultimo codice.
La prima cosa che ho fatto è l'aggiunta di un pulsante per cancellare:
function cancella() {
cx.clearRect(0, 0, c.width, c.height);
}
Si ha però, una stranezza: usando questo pulsante si cancella l'immagine caricata, ma poi, volendola ricaricare, non lo si può fare direttamente, ma si deve prima caricare un'immagine diversa.
Non riesco a capire questa stranezza e desidero sapere come evitarla.
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="tela"></canvas>
    <br>
    <label for="photo">Canvas</label>
    <input type="file" name="photo" accept="image/*" id="photo">
<br><br>
<input type="button" value="cancella" onclick="cancella()">


    <script>
        let ratio = null
        const selectPhoto = document.getElementById('photo')
        const c = document.getElementById("tela")
        const cx = c.getContext("2d")


        selectPhoto.addEventListener('change', (e) => {
            const img = new Image()
            const url = URL.createObjectURL(e.target.files[0])
            img.src = url


            img.onload = () => {
                (img.width > img.height)
                    ? ratio = img.width / c.width
                    : ratio = img.height / c.height


                let newWidth = img.width / ratio
                let newHeight = img.height / ratio


                const x = (c.width - newWidth) / 2
                const y = (c.height - newHeight) / 2


                cx.clearRect(0, 0, c.width, c.height)
                cx.drawImage(img, x, y, newWidth, newHeight)
                URL.revokeObjectURL(url)
            }
        })


     function cancella() {
	cx.clearRect(0, 0, c.width, c.height)
     }
    </script>
</body>
</html>

**ninja72** · 05-04-2023, 19:53

Ciao , sotto

codice:

URL.revokeObjectURL(url)

aggiungi

codice:

selectPhoto.value = ""

.

Discussione: caricare immagini da tastiera in <canvas>

Strumenti discussione

Ricerca discussione

Visualizza

caricare immagini da tastiera in <canvas>

Tag per questa discussione

Permessi di invio