Chiamate ajax da js a php per immagini

Guaro99 · 9 Novembre 2018

Buonasera, mi trovo un po in difficoltà con il php.

vorrei sapere se (e se si come) è possibile inviare una immagine ad un file js che effettua una chiamata asincrona ad un file php.

Mi spiego meglio, vorrei impostare lo sfondi di un sito , ma vorrei che questa immagine di sfondo fosse passata tramite una chiamata ad un file .php .

apro il sito.html --> lo script js con ajax richiama il php --> il php cerca tra i file l'immagine e la invia --> il js la imposta come immagine.

Spero di essere stato chiaro, grazie mille dell'aiuto in anticipo

rctimelines · 9 Novembre 2018

Il file PHP richiamato dallo script js trasmetterà il nome dell'immagine e non l: immagine. Poi, con quel nome lo script dovrà lavorare sul DOM per ricaricarla leggendola dal server tramite http

Inviato dal mio Nexus 5 utilizzando Tapatalk

Guaro99 · 9 Novembre 2018

Capisco, mi sapresti dire come richiedere al server l'invio di un'immagine?

Perché vorrei caricare l'immagine di sfondo con il js, però vorrei anche che dopo un tot di tempo si ricaricasse in modo da mostrare l'immagine nuova nel caso fosse stata modificata nel server.

rctimelines · 10 Novembre 2018

Devi ricaricare la pagina.

Ma cosa vorresti fare di preciso? Forse uno slide show dello sfondo? In tal caso le immagini le devi caricare tutte al caricamento della pagina (dal server tramite http) e visualizzarle ciclicamente con uno script.

Inviato dal mio Nexus 5 utilizzando Tapatalk

1nd33d · 10 Novembre 2018

Senza nemmeno usare jquery, puoi impostare la ripetizione temporizzata di una funzione js che reimposta il background.
E' tuttavia necessario ingannare in qualche modo la cache del browser che non riscaricherà l'immagine se gli passi sempre lo stesso link (fino a quando non fai un refresh dell'intera pagina). Un codice del genere però dovrebbe funzionare:

HTML:

<html>
<head>
<style>
#foodiv{
    margin: 0 auto;
    width:20em;
    height:20em;
    text-align:center;
}
</style>
</head>
<body>
<div id="foodiv">
Ciao Mondo!
</div>
<script>
    var x = 0;
    function setbg(){
        document.getElementById('foodiv').style.background = 'url(https://picsum.photos/200/?random&qualcosa=' + x +')';
        x = x+1;
    };
    setbg();
    setInterval(setbg, 3000);  //ogni 3 secondi
</script>
</body>
</html>

L'accorgimento qui è quello di inserire un valore diverso in coda al link all'immagine (nella query). In questo esempio sto chiamando un sito che genera immagini random ad ogni chiamata, nel tuo caso devi inserire il link alla pagina php che dovrà rispondere con l'immagine da impostare.
Un problema qui è che ogni aggiornamento provoca un download dell'immagine anche se non è cambiata e per un istante vedi il background scomparire.
Dovresti prevedere un meccanismo che ti permetta di evitare chiamate inutili che restituirebbero la stessa immagine, per esempio fornendo un endpoint che ti dice se e quando è stata cambiata l'immagine, o il suo hash. Oppure, potresti usare ajax per scaricare l'immagine e lato client ne controlli l'hash rispetto all'immagine che hai attualmente come background (in questo caso però non ti risparmi il numero di richieste e i dati trasmessi, ma riesci ad evitare il fastidio grafico).
Di soluzioni possibili ce ne sono diverse...

Guaro99 · 12 Novembre 2018

rctimelines ha detto:
Devi ricaricare la pagina.

Ma cosa vorresti fare di preciso? Forse uno slide show dello sfondo? In tal caso le immagini le devi caricare tutte al caricamento della pagina (dal server tramite http) e visualizzarle ciclicamente con uno script.

Inviato dal mio Nexus 5 utilizzando Tapatalk

Vorrei creare una sorta di stream video usando questo metodo di invio delle immagini.
Grazie della risposta

Post unito automaticamente: 12 Novembre 2018

1nd33d ha detto:
Senza nemmeno usare jquery, puoi impostare la ripetizione temporizzata di una funzione js che reimposta il background.
E' tuttavia necessario ingannare in qualche modo la cache del browser che non riscaricherà l'immagine se gli passi sempre lo stesso link (fino a quando non fai un refresh dell'intera pagina). Un codice del genere però dovrebbe funzionare:

HTML:

<html> <head> <style> #foodiv{ margin: 0 auto; width:20em; height:20em; text-align:center; } </style> </head> <body> <div id="foodiv"> Ciao Mondo! </div> <script> var x = 0; function setbg(){ document.getElementById('foodiv').style.background = 'url(https://picsum.photos/200/?random&qualcosa=' + x +')'; x = x+1; }; setbg(); setInterval(setbg, 3000); //ogni 3 secondi </script> </body> </html>

L'accorgimento qui è quello di inserire un valore diverso in coda al link all'immagine (nella query). In questo esempio sto chiamando un sito che genera immagini random ad ogni chiamata, nel tuo caso devi inserire il link alla pagina php che dovrà rispondere con l'immagine da impostare.
Un problema qui è che ogni aggiornamento provoca un download dell'immagine anche se non è cambiata e per un istante vedi il background scomparire.
Dovresti prevedere un meccanismo che ti permetta di evitare chiamate inutili che restituirebbero la stessa immagine, per esempio fornendo un endpoint che ti dice se e quando è stata cambiata l'immagine, o il suo hash. Oppure, potresti usare ajax per scaricare l'immagine e lato client ne controlli l'hash rispetto all'immagine che hai attualmente come background (in questo caso però non ti risparmi il numero di richieste e i dati trasmessi, ma riesci ad evitare il fastidio grafico).
Di soluzioni possibili ce ne sono diverse...

Grazie mille del codice, appena ho un po di tempo proverò a testarlo e implementarlo.

Grazie molte della risposta

Mursey · 12 Novembre 2018

Guaro99 ha detto:
una sorta di stream video

Proprio una sorta... perchè chiamarlo video è una parola grossa visti i tempi di caricamento e l'asincronismo. :)

rctimelines · 12 Novembre 2018

Guaro99 ha detto:
Vorrei creare una sorta di stream video usando questo metodo di invio delle immagini.
Grazie della risposta

Post unito automaticamente: 12 Novembre 2018

Grazie mille del codice, appena ho un po di tempo proverò a testarlo e implementarlo.

Grazie molte della risposta

Non puoi usare Ajax per trasmettere le immagini

Inviato dal mio Nexus 5 utilizzando Tapatalk

Guaro99 · 12 Novembre 2018

Sapreste consigliarmi qualcosa per creare una sorta di stream video quali in live?

1nd33d · 12 Novembre 2018

Stream video o immagini? Sono due cose ben diverse...
Se l'obiettivo è una sorta di slideshow con immagini che cambiano a intervalli regolari, allora puoi dare un occhio qua: https://www.w3schools.com/w3css/w3css_slideshow.asp

rctimelines · 12 Novembre 2018

1nd33d ha detto:
Stream video o immagini? Sono due cose ben diverse...
Se l'obiettivo è una sorta di slideshow con immagini che cambiano a intervalli regolari, allora puoi dare un occhio qua: https://www.w3schools.com/w3css/w3css_slideshow.asp

Magari leggere tutto il thread!?! Uno slide show manuale è forse uno streaming video??

Inviato dal mio Nexus 5 utilizzando Tapatalk

1nd33d · 12 Novembre 2018

rctimelines ha detto:
Magari leggere tutto il thread!?! Uno slide show manuale è forse uno streaming video??

Io devo ancora capire se l'utente ha chiaro cosa vuole fare... prima vuole caricare immagini, poi ricaricarle ogni tot tempo, poi "una sorta di stream video usando questo metodo di invio delle immagini" (???), poi "una sorta di stream video quali in live"... adesso gli sfondi sono diventati streaming video live.
Comunque... se tu avessi letto il link, avresti notato anche uno slideshow automatico, che di fatto può simulare uno "streaming" di immagini (io mi riferivo a quello).

Guaro99 · 13 Novembre 2018

1nd33d ha detto:
Io devo ancora capire se l'utente ha chiaro cosa vuole fare... prima vuole caricare immagini, poi ricaricarle ogni tot tempo, poi "una sorta di stream video usando questo metodo di invio delle immagini" (???), poi "una sorta di stream video quali in live"... adesso gli sfondi sono diventati streaming video live.
Comunque... se tu avessi letto il link, avresti notato anche uno slideshow automatico, che di fatto può simulare uno "streaming" di immagini (io mi riferivo a quello).

Chiedo scusa, non volevo generare conflitti tra utenti.

Mi spiego meglio perché effettivamente non sono stato in grado di chiarire il mio problema efficacemente.

Ho un programma in c# che in loop effettua degli screenshot in un PC (che in questo caso farebbe da server).
Io avrei voluto che un secondo PC richiedesse in loop le immagini per visualizzarle in una pagina, credevo che questo mi avrebbe permesso di creare un movimento quasi fluido delle immagini.

Considerando che questo modo di procedere è stato escluso nel corso della discussione sapreste consigliarmi un altro procedimento?

rctimelines · 13 Novembre 2018

Guaro99 ha detto:
Ho un programma che in loop effettua degli screenshot in un PC (che in questo caso farebbe da server).
Io avrei voluto che un secondo PC richiedesse in loop le immagini per visualizzarle in una pagina, credevo che questo mi avrebbe permesso di creare un movimento quasi fluido delle immagini.

Nessuna disputa, forse ti manca la terminologia corretta, perché sinceramente, continuo a capire molto poco di quanto sopra!

Inviato dal mio Nexus 5 utilizzando Tapatalk

Mursey · 13 Novembre 2018

Ma vuoi crearti da solo un sistema di stream video ?
Perchè la strada non è certo lavorare di screenshot ma molto molto più complessa.

Se è uno studio o una soddisfazione personale ne possiamo discutere ma se è una soluzione ad un altro problema allora meglio usare cose già esistenti...

Cerca

Chiamate ajax da js a php per immagini

Guaro99

Nuovo Utente

rctimelines

Guaro99

Nuovo Utente

rctimelines

1nd33d

Utente Attivo

Guaro99

Nuovo Utente

Mursey

Super Moderatore

rctimelines

Guaro99

Nuovo Utente

1nd33d

Utente Attivo

rctimelines

1nd33d

Utente Attivo

Guaro99

Nuovo Utente

rctimelines

Mursey

Super Moderatore

Entra