Al codice ho aggiunto un pulsante cha lancia la funzione disegni() che disegna un rettangolo di contenuto giallo e bordo verde. Cliccando sul pulsante salva , si ha una pagina con l'immagine e cliccando col pulsante destro "salva con il nome", salva con estensione .png o, se si vuole, in .jpg o altra. Perché, invece, se si carica un'immagine e la si elabora, per esempio facendo un ritaglio e si clicca sullo stesso pulsante salva, non avviene nulla e l'immagine non viene salvata, pur avendo estensione .png o .jpg?
Spero di avere una risposta e, possibilmente, una soluzione perché desidererei proseguire nell'elaborazione delle immagini. Grazie
lanvoel
codice:
<!doctype html>
<html>
<body>
<canvas id="tela" width="600" height="388" Style="border: 2px solid red;">
</canvas>
<div id="div1" style="border: 2px solid red; position: absolute; left:650px; 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 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+'"/>');
}
function disegni() {
ctx.rect(20,20,200,100);
ctx.fillStyle="yellow";
ctx.strokeStyle="green";
ctx.lineWidth=5;
ctx.fill();
ctx.stroke();
}
</script>
</body>
</html>
Rispondi quotando