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;
}
Permessi di invio
Rispondi quotando