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:

<!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** · Ieri, 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** · Ieri, 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>

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