immagini

[iJim]

Salve mi potreste indicare un tutorial per la gestione, la manipolazione e la modifica delle immagini con javascript???? Ad esempio estrarre i pixel, o estrarre i bit, o le informazioni da un'immagine ecc...

[artorius]

allora, qui trovi gli attributi e gli eventi dell'oggetto Image:

http://www.comptechdoc.org/independe...javaimage.html

Vedi l'oggetto come un canale tramite il quale il browser carica un'immagine da un determinato url, senza dover caricare una nuova pagina.

l'oggetto funziona in questo modo:

//Con questo istanzi, ovvero crei, un oggetto della classe Image
var img = new Image();

//L'evento onLoad viene lanciato quando l'immagine indicata viene caricata correttamente, come a tutti gli eventi, è possibile associarci una funzione che viene chiamata al verificarsi dell'evento
img.onload = function(){
   myFunct();
}

//L'evento onError, come dice il nome, viene lanciato se si verifica un errore
img.onError = function(){ alert("Non è stato possibile caricare l'immagine")}

//Indicando nell'attributo src il path dell'immagine, si attiva il processo di download della stessa. Quando l'immagine viene caricata l'evento onLoad viene lanciato, se si verifica un errore viene lanciato l'evento onError (N.B. C'è anche l'evento onAbort che viene lanciato se il caricamento viene annullato)
img.src = "path/to/image.jpg";

function myFunct()
{
    //gli oggetti Image, una volta caricata l'immagine, hanno a disposizione le proprietà width e height che contengono le dimensioni della stessa in pixel
    alert(img.width+"px X "+img.height+"px");
} 

La cosa più importante da capire è che il caricamento dell'immagine in questo modo è asincrono, cioé non necessita di bloccare JS o il caricamento della pagina per funzionare.
Appunto per questo è utile in azioni come, il caricamento di immagini pesanti, o da server diversi, il browser le processa in parallelo chiamando le funzioni associate agli eventi quando sono pronti.

Spero che la mia mini guida ti sia utile.

[br1]

Originariamente inviato da artorius
allora, qui trovi gli attributi e gli eventi dell'oggetto Image:

http://www.comptechdoc.org/independe...javaimage.html

Vedi l'oggetto come un canale tramite il quale il browser carica un'immagine da un determinato url, senza dover caricare una nuova pagina.

l'oggetto funziona in questo modo:

//Con questo istanzi, ovvero crei, un oggetto della classe Image
var img = new Image();

//L'evento onLoad viene lanciato quando l'immagine indicata viene caricata correttamente, come a tutti gli eventi, è possibile associarci una funzione che viene chiamata al verificarsi dell'evento
img.onload = function(){
   myFunct();
}

//L'evento onError, come dice il nome, viene lanciato se si verifica un errore
img.onError = function(){ alert("Non è stato possibile caricare l'immagine")}

//Indicando nell'attributo src il path dell'immagine, si attiva il processo di download della stessa. Quando l'immagine viene caricata l'evento onLoad viene lanciato, se si verifica un errore viene lanciato l'evento onError (N.B. C'è anche l'evento onAbort che viene lanciato se il caricamento viene annullato)
img.src = "path/to/image.jpg";

function myFunct()
{
    //gli oggetti Image, una volta caricata l'immagine, hanno a disposizione le proprietà width e height che contengono le dimensioni della stessa in pixel
    alert(img.width+"px X "+img.height+"px");
} 

La cosa più importante da capire è che il caricamento dell'immagine in questo modo è asincrono, cioé non necessita di bloccare JS o il caricamento della pagina per funzionare.
Appunto per questo è utile in azioni come, il caricamento di immagini pesanti, o da server diversi, il browser le processa in parallelo chiamando le funzioni associate agli eventi quando sono pronti.

Spero che la mia mini guida ti sia utile.

Grazie, chiaro e circostanziato, ma del tutto fuori tema rispetto al quesito: d'altronde una risposta e' difficile dato che con javascript non e' possibile "manipolare" immagini a parte estrarne qualche informazione... come le dimensioni.

@ iJim: la prossima volta assegna alla discussione un titolo a termini di regolamento