Come caricare un'immagine in Canvas dinamicamente

lanvoel39

Nuovo Utente
5 Set 2019
6
1
3
Precedentemente ho posto il problema di come salvare in Canvas un'immagine caricata in Canvas e poi elaborata, problema che poi ho risolto riprovando il codice.
Ora nel codice che riporto carico l'immagine 1980.jpg scrivendo il nome del file 1980.jpg nel codice stesso.
Ho il problema di generalizzare questo caricamento e cioè caricare in Canvas un'immagine in modo dinamico, navigando tra le cartelle e scegliendolo.
Ringrazio anticipatamente per il vostro aiuto.

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>
<input type="button" value="cancella image" onclick ="cancella()"><br>
<input type="button" value="elabora image" onclick="elabora()"><br>
<input type="button" value="salva image " onclick="salva()"><br><br>
<input type="button" value="disegni canvas" onclick="disegni()"><br>
</div>

<br>
origine taglio (anche con mouse): <input type="text" id="oix" size=5><input type="text" id="oiy" size=5>
scrivi dimensioni ritaglio: <input type="text" id="lx" size=5 value=100><input type="text" id="ay" size=5 value=100><br>
destinazione ritaglio: <input type="text" id="oidx" size=5 value=100><input type="text" id="oidy" size=5 value=100>
nuova dimensione ritaglio: <input type="text" id="ldx" size=5 value=100><input type="text" id="ady" size=5 value=100><br>
<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);
 }
}

function cancella() {
var img=new Image;
 img.src = 'vuota.jpg'; // immagine vuota bianca
 img.onload = function() {
   ctx.drawImage(img,0,0);
 }
}

function elabora() {
 var img=new Image;
 img.src = '1980.jpg';
var oix1=oix.value*1; var oiy1=oiy.value*1; var lx1=lx.value*1; var ay1=ay.value*1;
var oidx1=oidx.value*1; var oidy1=oidy.value*1; var ldx1=ldx.value*1; var ady1=ady.value*1;
ctx.drawImage(img,oix1,oiy1,lx1,ay1,oidx1,oidy1,ldx1,ady1);// immagine ritaglio
}

function salva()
{
    var mia_immagine    = c.toDataURL("image/jpg", 1.0);
    document.write('<img src="'+mia_immagine+'"/>');
}

function disegni() {
ctx.rect(20,20,200,100);
ctx.fillStyle="yellow";
ctx.strokeStyle="green";
ctx.lineWidth=5;
ctx.fill();
ctx.stroke();
}

function PosizioneCursore()
{
    var asse_x = event.clientX;
    var asse_y = event.clientY;
    oix. value = asse_x -200;
    oiy.value = asse_y - 100;
}
</script>
</body>
</html>
 

Allegati

  • 1980.jpg
    1980.jpg
    53 KB · Visite: 132
Discussioni simili
Autore Titolo Forum Risposte Data
Y Come caricare e visualizzare un'immagine PHP 0
Selenio89 problema a caricare immagine con html. dove sbaglio? HTML e CSS 25
L Come caricare <iframe> dopo il click ad un immagine, per migliorare le prestazioni. Discussioni Varie 0
andrea93_12 Aiuto caricare immagine su database MYSQL MySQL 1
F Caricare immagine da Mysql su evento click-radio Javascript 5
asevenx problemi per caricare immagine su server PHP 4
P caricare immagine in flash Flash 2
G Caricare immagine Javascript 1
J Caricare, ridimensionere e copiare un immagine con PHP PHP 1
D caricare un'immagine al passaggio del mouse HTML e CSS 7
C Come caricare foto da google foto ad un sito? Discussioni Varie 1
I javascript come caricare una pagina sopra quella corrente in automatico Javascript 2
O MIT App Inventor - caricare un file da app Sviluppo app per Android 1
Alex_70 [PHP] Caricare foto su un'altra tabella collegata PHP 0
A [Java] caricare un url esterno senza utilizzo di iframe Java 0
G Caricare una jpg con il php PHP 1
N [WordPress] Caricare diversi fogli di stile in tema-child WordPress 0
G Caricare una semplice Jpg con il PHP PHP 1
E Caricare dati da DB MySql all'apertura pagina, meglio PHP o Javascript? PHP 1
P [PHP] Caricare un file da client XP su server Ubuntu PHP 2
M [Javascript] Caricare link esterno file js in base al device Javascript 0
giancarlob Prova a rimandare o a caricare in modo asincrono le risorse di blocco SEO e Posizionamento 0
F [HTML] Caricare un font ttf HTML e CSS 2
Y CARICARE IMMAGINI IN CARTELLA PHP PHP 3
A Caricare foto in una gallery PHP 0
A caricare file PHP con Load cambiandone parte del contenuto jQuery 1
9 caricare immagini in tabella html da cartella sul server tramite id database PHP 1
A Caricare una pagina jsp in un div alla pressione di un button Javascript 1
M Problema caricare file sul hosting Discussioni Varie 1
M Caricare più google maps con un ciclo Javascript 1
marino51 non riesco a caricare un allegato percgè non riesco a ridimensionare la finestra Supporto Mr.Webmaster 0
P Caricare nuova pagina dopo invio dati form Javascript 11
D Caricare foto in un DB PHP 2
S Caricare una pagina con JQuery jQuery 4
A [risolto] caricare con un ciclo For dei file PHP inclusi in una variabile array PHP 3
M Zenphoto: far caricare immagini agli utenti CMS (Content Management System) 0
F Caricare file da locale al server Javascript 3
D Caricare file via ajax Ajax 1
G caricare immagini sul db con il formato text PHP 3
P Caricare un .exe sul sito. HTML e CSS 6
P caricare dati all'interno di un tag div html HTML e CSS 15
I Perchè devo cliccare 2 volte su un link per caricare correttamente il css di una galleria? WordPress 1
F Caricare contenuto pagina all'interno di un'altra pagina Javascript 1
S come caricare un banner tramite un form in una cartella all interno del sito PHP 11
F comando php per caricare delle scritte in una pagina html PHP 4
C Problema nel Caricare file e spostarlo con la funzione move_uploaded_file PHP 14
X Caricare contenuto iframe su richiesta Javascript 6
F Caricare pagine del sito sul database MySQL 1
B Caricare immagini in un DB insieme ad altri dati e visualizzarli PHP 2
C in un file html/javascript caricare i div presenti nel body in un file di testo e richiamarli Javascript 7

Discussioni simili