Pagina 1 di 2 1 2 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 12
  1. #1
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    180

    Caricare immagini in Canvas in modo dinamico

    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>

  2. #2
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,101
    In javascript non puoi accedere (per fortuna) alle cartelle del pc dell’utente.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  3. #3
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    180
    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

  4. #4
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,101
    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.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  5. #5
    Amministratore L'avatar di Vincent.Zeno
    Registrato dal
    May 2003
    residenza
    Emilia-Romagna (tortellini und cappelletti land!)
    Messaggi
    20,029
    vi siete distratti... e state prendendo strane vie

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

  6. #6
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    180
    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

  7. #7
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,101
    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?”
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

  8. #8
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    180
    Grazie Andrea. Cercherò di far tesoro dei tuoi consigli. Non sono un grande programmatore, quindi "io speriamo che me la cavo"!
    Un saluto

    lanvoel

  9. #9
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    180
    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

  10. #10
    Moderatore di Annunci siti web, Offro lavoro/collaborazione, Cerco lavoro L'avatar di cavicchiandrea
    Registrato dal
    Aug 2001
    Messaggi
    26,101
    Quote Originariamente inviata da lanvoel Visualizza il messaggio
    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.
    Cavicchi Andrea
    Problemi con javascript, jquery, ajax clicca qui

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.