Caricare immagini in Canvas in modo dinamico

**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

Hybrid View

Permessi di invio