salvare una immagine elaborata in canvas

Stato
Chiusa ad ulteriori risposte.

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
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Hai già una discussione aperta con lo stesso problema

Per postare del codice devi usare gli appositi tag!


Leggi attentamente il regolamento prima di continuare sul forum
 
Stato
Chiusa ad ulteriori risposte.
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
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
Emix Salvare documenti in DB PHP 3

Discussioni simili