salvare una immagine elaborata in canvas

lanvoel39

Nuovo Utente
5 Set 2019
6
1
3
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
 

Allegati

  • 1980.jpg
    1980.jpg
    53 KB · Visite: 178
  • vuota.jpg
    vuota.jpg
    14 KB · Visite: 173

lanvoel39

Nuovo Utente
5 Set 2019
6
1
3
Riprovando il mio codice mi sono accorto che l'istruzione
mia_immagine = c.toDataURL("image/jpg", 1.0);
funziona con qualsiasi immagine, sia creata con canvas che non, basta, dopo averla lanciata con il pulsante "salva image", fare clic destro sull'immagine contenuta nel canvas sullo schermo e scegliere "salva immagine con nome".
Resta la secoda difficoltà, ma penso però che la soluzione che ho usata dell'immagine bianca, possa essere anche una soluzione accettabile.
Grazie e un saluto

lanvoel39
 
Discussioni simili
Autore Titolo Forum Risposte Data
Stex1967 Salvare una immagine che si trova su porta TCP 8080 di altro sito PHP 7
L salvare una immagine elaborata in canvas Javascript 1
P C# Salvare una colonna del DataGridView XML 0
M [PHP] Salvare campo di una tabella in una variabile PHP 14
C Photoshop CS 6 salvare una modifica Photoshop 0
P dove si va a salvare il dbase phpmyadm una volta creato ???? Database 0
P dove si va a salvare il dbase phpmyadm una volta creato ???? Database 7
S Salvare dei dati in una determinata tabella in base al select che l'utente seleziona PHP 8
M salvare una activity e richiamarla Sviluppo app per Android 6
A Salvare completamente una pagina web di un sito qualsiasi PHP 5
G salvare più record in una tabella PHP 5
V Salvare questo valore all'interno di una variabile...come fare? PHP 10
nim salvare in una tabella i nomi dei file contenuti in cartella PHP 2
R Come salvare codice in una tabella? PHP 1
A salvare una pagina web Javascript 0
2 Salvare una pagina Javascript 0
E fpdf salvare e aprire il file PHP 4
I salvare testo chat PHP 4
B Selezionare un'immagine e salvare la selezione Photoshop 3
E Salvare immagini PHP 0
L salvare codice html in mysql PHP 3
L salvare somma con sottrazione PHP 1
M Salvare coordinate Maps nel DB PHP 2
D SALVARE "MASCHERA" + "ALLEGATO PDF" IN UN UNICO PDF MS Access 0
A Twitter aggiungere tweet a campagna esistente o salvare pubblico Social Media Marketing 0
D Salvare in diversi campi mysql con diversi ID PHP 0
D [Javascript] salvare immagine canvas - paypal Javascript 0
M Salvare JSONObject in Shared Preference Sviluppo app per Android 0
S [ASP] SALVARE VALORE SELECT OPTION SU CAMPO TABELLA ACCESS Classic ASP 9
M [PHP] FPDF Salvare su disco C locale Windows PHP 3
L [PHP] Salvare csv da form dati PHP 5
A Salvare immagine ridimensionata in MySql con GD PHP 12
G php salvare file in campo blob mysql: massimo 4MB PHP 1
M Salvare pagine web come segnalibro con istruzioni javascript Javascript 0
L Salvare posizione maps Sviluppo app per Android 0
G [PHP] SALVARE RECORD ESTRATTI DA DATABASE PHP 6
D Come salvare scelta della select "dinamica" ajax-php? Come dato php o attributo value tag option? Ajax 5
P [SOLVED] salvare il TCPDF output in mysql e rivisualizzarlo PHP 3
M Salvare i dati nel db e aprire altra pagina php PHP 7
M Form ASP su MsSQL salvare 2 campi in 1 Classic ASP 4
V [PHP] Salvare campo radio in db e leggerlo PHP 15
S [PHP] Salvare dati tabella in formato exel PHP 0
Benix89 Come salvare radio button selezionato Magento 1
Benix89 Salvare radio button selezionato PHP 2
P Come salvare il proprio diario di fb Discussioni Varie 0
P Salvare i dati restituiti dopo autenticazione OAuth2 Javascript 0
M Salvare in tabella link file importato PHP 1
F Cliccare e salvare src immagine HTML e CSS 2
M Cartella predefinita dove salvare i backup PHP 0
C Salvare il click su di un Button Sviluppo app per Android 9

Discussioni simili