Caricare immagini in Canvas in modo dinamico

**lanvoel** · 27-03-2021, 15:35

In una precedente discussione avevo il problema di salvare una immagine elaborata in Canvas, problema che poi,riprovando, sono riuscito a risolvere.
Ora ho un problema di generalizzazione. Nel codice che segue carico in Canvas l'immagine 1880.jpg scrivendo il suo nome, conosciuto in precedenza, nel codice.
Ora invece vorrei caricare un'immagine qualunque, di cui non si conosce ancora il nome, in modo dinamico, navigando tra le cartelle del computer e scegliendola con un clic.
Come potrei fare? Desidero qualche suggerimento. Grazie

lanvoel

codice:

<!doctype html>
<html>
<body>
    <div style="position: absolute; left: 200px; top:100px;">
<button onclick="PosizioneCursore()">
  <canvas id="tela" width="600" height="388" Style="border: 2px solid red;">
  </canvas>
</button>
     </div>
<div id="div1" style="border: 2px  solid red; position: absolute; left:800px; top:20px;">
<input type="button" value="carica image" onclick="carica()"><br>
</div>
<script>
var c=document.getElementById("tela");
var ctx=c.getContext("2d");


function carica() {
var img=new Image;
 img.src = '1980.jpg'; // immagine da caricare
 img.onload = function() {
  ctx.drawImage(img,4,4);
 }
}
</script>
</body>
</html>

**cavicchiandrea** · 27-03-2021, 20:34

In javascript non puoi accedere (per fortuna) alle cartelle del pc dell’utente.

**lanvoel** · 27-03-2021, 23:29

Grazie Andrea.
Però non capisco quel (per fortuna), perché mi pare che, con php (per fortuna), si può accedere alle cartelle del computer. O mi sbaglio?

lanvoel

**cavicchiandrea** · 27-03-2021, 23:37

Per fortuna, per motivi di sicurezza nei confronti del utente che vista il sito. Con php (ma anche come altri linguaggi) puoi accedere alle cartelle del server (vedi tuo dominio.xxxx) non le cartelle del pc dell’utente.

**Vincent.Zeno** · 28-03-2021, 00:54

vi siete distratti... e state prendendo strane vie

lanvoel desidera far scegliere all'utente l'immagine da inserire, tramite un semplice "sfoglia".

**lanvoel** · 28-03-2021, 08:56

Ringrazio ancora Andrea per le sue risposte.
Penso però, che Vinzent.Zeno abbia capito il mio problema: invece di inserire in Canvas una immagine da codice, cosa devo fare, usando JavaScript, per inserire in Canvas una immagine con "sfoglia". Grazie

lanvoel

**cavicchiandrea** · 28-03-2021, 10:46

Forse questo https://howto.webarea.it/javascript/...javascript_198 fa al caso tuo. Non credo (visita sommaria) che esegua comunque upload del file che dovrai implementare se vuoi rendere l’immagine definitiva per visite future dell’utente.

@lanvoel: Consiglio, in futuro fai domande senza dare indicazioni ( che potrebbero essere sbagliate o forvianti come in questo caso ) tipo: “vorrei dare all’utente la possibilità di mostrare una sua immagine sul sito come posso fare?”

**lanvoel** · 28-03-2021, 14:51

Grazie Andrea. Cercherò di far tesoro dei tuoi consigli. Non sono un grande programmatore, quindi "io speriamo che me la cavo"!
Un saluto

lanvoel

**lanvoel** · 14-04-2021, 22:17

Ho provato con il codice
https://howto.webarea.it/javascript/...javascript_198
suggeritomi da Andrea, ma non sono riuscito a caricare l'immagine in Canvas.
Chiedo quindi ancora un aiuto per risolvere, possibilmente il problema.
Come già ho detto nel codice

codice:

<!doctype html>
<html>
<body>
<div style="position: absolute; left: 200px; top:100px;">
  <canvas id="tela" width="600" height="388" Style="border: 2px solid red;">
  </canvas>
</div>
<div id="div1" style="border: 2px  solid red; position: absolute; left:800px; top:20px;">
<input type="button" value="carica image" onclick="carica()"><br>
</div>
<script>
var c=document.getElementById("tela");
var ctx=c.getContext("2d");
function carica() {
var img=new Image;
 img.src = '1980.jpg'; // immagine da elaborare
 img.onload = function() {
  ctx.drawImage(img,4,4);
 }
}
</script>
</body>
</html>

con la funzione function carica()
si carica in Canvas l'immagine 1980.jpg.
Si dovrebbe trovare una funzione, o un codice che sostituisca questa funzione, per cercare nelle cartelle del computer una immagine qualunque da caricare in Canvas, in modo da poter poi essere elaborata

lanvoel

**cavicchiandrea** · 15-04-2021, 10:25

Originariamente inviata da lanvoel

con la funzione function carica()
si carica in Canvas l'immagine 1980.jpg.
Si dovrebbe trovare una funzione, o un codice che sostituisca questa funzione, per cercare nelle cartelle del computer una immagine qualunque da caricare in Canvas, in modo da poter poi essere elaborata
lanvoel

Ciao, non credo sia possibile con un "anteprima dell'immagine" (di fatto l'immagine è ancora sul pc del l'utente dove non hai permessi di scrittura) direi che la devi uplodare sul server per poi poterla modificare.

Discussione: Caricare immagini in Canvas in modo dinamico

Strumenti discussione

Ricerca discussione

Visualizza

Caricare immagini in Canvas in modo dinamico

Permessi di invio