Pagina 2 di 2 primaprima 1 2
Visualizzazione dei risultati da 11 a 13 su 13
  1. #11
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    181
    Usando php ho caricato immagini nel server e poi usando ancora php, ho scaricato le immagini sul mio cmputer.
    Chiedo se è possibile mostrare queste immagini, scaricate con php, nel canvas, in modo da poterle elaborare con il codice Canvas stesso. Grazie

    lanvoel

    NB: ho cercato di riportare il codice in php, ma sono mstato bloccato.

  2. #12
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    181
    Riporto il codice che ho scritto per elaborare le immagini con Canvas.
    Cliccando sul pulsante carica image si carica in Canvas l'immagine 1980.jpg, scritta nel codice, e la si può elaborare con il pulsante apposito (l'elaborazione consiste nel ritagliare e posizionare e ridimensionare il ritaglio).
    Cliccando sul pulsante Scegli il file, scelgo una immagine nelle mie cartelle e la invio al contenitore <Canvas> a cui ho dato l'identificatore id="output", ma l'immagine, che vorrei elaborare, non compare, e il codice non dà nessun errore.
    Faccio notare che se l'dentificatore id="output" lo metto al posto dell'identificatore id="div1", l'immagine compare regolarmente dentro il contenitore <div></div>, ma non dentro <Canvas> e quindi non si può elaborare.
    Penso che si debba lavorare sul file my.js e ci ho provato, ma senza risultati: spero in un aiuto. Grazie


    lanvoel


    codice:
    <!doctype html>
    <html>
    <head>
    <meta charset='utf-8' />
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Tutorial HowTo WebArea</title>
    <script type='text/javascript' src='my.js'></script>
    <link href='my.css' rel='stylesheet' />
    </head>
    <body>
        <div   id="div1" style="position: absolute; left: 200px; top:100px;">
    <button onclick="PosizioneCursore()">
      <canvas id="output" 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="file" name="myfile" id="myfile" /><br><br>
    <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("output");
    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>
    codice di my.js
    codice:
    function anteprimaFile(evt) {
    	var file = evt.target.files;
    	var f = file[0];
    	if (!f.type.match('image.*')) {
    		alert("Attenzione: il file selezionato deve essere una immagine");
    		return false;
    	}
    
    
    	var reader = new FileReader();
    
    
    	reader.onload = (function(theFile) {
    		return function(e) {
    		  document.getElementById('output').innerHTML = '<img class="thumb" title="'+escape(theFile.name)+'" src="'+e.target.result+'" />';
    		};
    	})(f);
    
    
    	reader.readAsDataURL(f);
    }
    
    
    document.addEventListener("DOMContentLoaded", function() {
    	document.getElementById('myfile').value='';
    	document.getElementById('output').value='';
    	document.getElementById('myfile').addEventListener('change', anteprimaFile, false);
    });
    
    codice di my.css
    
    
    codice:
    .img-thumbnail {
        height: 75px;
        border: 1px solid #000;
        margin: 10px 10px 0 0;
    }

  3. #13
    Utente di HTML.it
    Registrato dal
    Jan 2018
    Messaggi
    181
    Non essendoci stati di recente nuovi interventi e vedendo la discussione andare "a fondo", con questo mio intervento la riporto "a galla".
    Desidero ancora chiedere agli esperti se si può risolvere il mio problema e cioè:
    1) se è possibile caricare nel Canvas una immagine, per essere elaborata, in modo attivo e cioè in modo che l'utente la possa scegliere navigando nelle tra le sue cartelle (per es. con "sfoglia") e non scrivendola nel codice come ho fatto io nella righe:
    function carica() {
    var img=new Image;
    img.src = '1980.jpg'; // immagine da elaborare
    img.onload = function() {
    ctx.drawImage(img,4,4);
    }
    }


    2)se sì, come fare?
    Grazie


    lanvoel

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.