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
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>
