Con questo codice carico l'immagine "1980.jpg" e opero una elaborazione (in questo caso un ritaglio).
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>
Ho due difficoltà.
1) Ho cercato di salvare questo ritaglio con l'istruzione toDataURL() che qui non funziona, mentre funziona se uso questa istruzione per salvare i grafici realizzati con solo nCanvas. Quindi, cosa si deve fare per salvare le immagini che non siano solo grafici canvas?
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
lanvoel39
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>
Ho due difficoltà.
1) Ho cercato di salvare questo ritaglio con l'istruzione toDataURL() che qui non funziona, mentre funziona se uso questa istruzione per salvare i grafici realizzati con solo nCanvas. Quindi, cosa si deve fare per salvare le immagini che non siano solo grafici canvas?
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
lanvoel39
