repelasen ha scritto:
Grazie per la risposta..
Forse mi son spiegato male o non ho capito io. Aggiungo dettagli
In pratica io ho una img di sfondo in un div di una pagina mia, tramite js vado a posizionare delle immagini sopra questa di sfondo...alla fine vorrei salvarmi in qualche modo il collage delle immagini..quelle incollate più quella di sfondo..
con il canvas potrei far questo? caricar l'immagine di sfondo e poi aggiungere immagini a piacimento dell'utente?
Cosi non credo che sia possibile.
Se conosci jQuery il lavoro potrebbe essere piu semplice, ma dovresti spiegarmi esattamente che tipo di lavoro vorresti fare.
Per quello che vorresti fare, supponendo che il sito sia tuo e che tu voglia far interagire all'utente con delle immagini per creare dei collage fotografici, hai 2 soluzioni con la risposta finale identica che sarebbe estrarre i bit da un canvas.
Per come lo spieghi qui una vota che tutte le foto sono in posizione con jquery devi stabilire tutte le immagini che si trovano all'interno del tuo div di riferimenti, jQuery ti permette di ottenere le dimensioni e la posizione anche dopo delle modifiche, che con semplice javascript base non restituisce se non settato esplicitamente da programmatore o script. dopo ricrei tutto questo collage all'interno di un canvas ed elabori tutto facendo un collage delle porzioni di immagini realmente visibili, se non ricordo male poi catturare solo gli elementi grafici disegnati e non le immagini, ma conoscendo le porzioni visibili dell'immagini poi estrarre i pixel della porzione visibile e lo inserisci su un nuovo imageData nel punto opportuno, un buon trucco sarebbe quello di partire caricando i pixel dello sfondo e poi sovrascrivere venendo ogni volta di piu verso foreground in modo da non avre eventuali spazi bianchi non riempiti e fare calcoli troppo complicati. quando avrai finito di scrivere il imageData lo inserisci in un Canvas e estrai il toDataURL che restituisce il contenuto dell'imagine sotto forma di URL da usare. Cerca dei tutorial magari per la manipolazione di immagini con canvas.
Il secondo consiglio e' quello di usare delle app fatto apositamente per lavorare sui convans evitando completamente i div o altri elementi html se non strettamente utili. Ce ne sono alcuni fatto molto bene che di permettono anche di costruire veri e propri video-game, e quindi sicuramente avrai lopportunita' di fare anche questo.
Ma dalla mia esperienza personale con i canvas ti devo dire che sono estremamente lenti. Avevo sperimentato la visualizzazione di un'immagine come se venisse stampanta punto per punto un colore per volta, con un immagine da 6Mpx ci impiega una vita, ma devi contare che doveva c'erano 3 cicli da 6Millioni di loops uno per ogni colore.
http://impactjs.com questo e' un api per creare giochi con i canvas, ma se cerchi con google ne troverai anche altri. Sono molto potenti e utili.