Con questo codice carico l'immagine "1980.jpg" e opero un ritaglio.
Ho due difficoltà.codice:<!doctype html> <html> <body> <canvas id="tela" width="600" height="388" Style="border: 2px solid red;"> </canvas> <input type="button" value="carica image" onclick="carica()"> <input type="button" value="cancella image" onclick ="cancella()"> <input type="button" value="elabora image" onclick="elabora()"> <input type="button" value="salva image " onclick="salva()"> <br>origine e dimensione ritaglio: <input type="text" id="oix" size=5 value=100><input type="text" id="oiy" size=5 value=100><input type="text" id="lx" size=5 value=100><input type="text" id="ay" size=5 value=100><br> <br>destinazione e nuova dimensione: <input type="text" id="oidx" size=5 value=100><input type="text" id="oidy" size=5 value=100><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 eleborare 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,4,4); } } 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+'"/>'); } </script> </body> </html>
1) Ho cercato di salvare questo ritaglio con l'istruzione toDataURL() che qui non funziona, mentre funziona per salvare i grafici realizzati con Canvas. Quindi, come devo fare per salvare le immagini?
2) Ho cercato di cancellare una immagine con l'istruzione clearRect() che cancella i grafici realizzati con Canvas, ma qui, anche questa istruzione non funziona. Ho ovviato caricando l'immagine "vuota.jpg" che è un'immagine bianca, ma desiderei sapere se c'è un'istruzione apposita. Ringraziando per il vostro aiuto
lanvoel

Rispondi quotando