Come elaborare un'immagine grande con un ritardo temporale minimo

Naviga le tue risposte
3

Sto cercando di creare un'interfaccia utente Web per l'elaborazione delle immagini, con alcune operazioni simili a quelle offerte da un sito come fotor.com. Tuttavia, ho problemi a raggiungere prestazioni simili. Ad esempio, diciamo che ho caricato un'immagine su fotor.com di circa 3+ MB e ho eseguito un'operazione di base per impostare la luminosità dell'immagine su "pieno". Quindi l'immagine di anteprima (mostra la tela) sarà resa immediatamente, senza quasi nessun ritardo.

Ho provato a fare la stessa operazione usando il popolare plugin "commonjs", ma ci è voluto troppo tempo per elaborare la stessa immagine, e in alcuni casi "blocca" il browser.

E ho anche provato l'elaborazione delle immagini lato server, usando link , visto che sto lavorando con Asp.Net, ma dopo aver elaborato l'immagine su il server, ci vuole troppo tempo per caricare di nuovo sul browser.

Quindi la mia domanda è: qualcuno mi può suggerire un'idea su come posso ottenere un'anteprima dell'immagine elaborata con un minimo ritardo di tempo (fotor.com do)?

    
posta BJ Patel 19.01.2018 - 15:13
fonte

3 risposte

7

Non posso e non raccomanderò alcuna librerie o librerie per questo, ma se sei disposto ad implementare un sistema da solo, ecco una semplice descrizione di cosa potrebbe funzionare:

  • invia l'immagine al server e ne riduce la risoluzione a qualcosa che può essere elaborato più rapidamente

  • invia l'immagine ridotta al client; ora implementa (o trova) un po 'di lib di java sul lato client che può elaborare questa immagine più piccola in modo rapido e affidabile

  • nell'interfaccia utente del client, esegui l'elaborazione in tempo reale e registra le operazioni che l'utente applica all'immagine (ad esempio "luminosità aumentata del 12%", "operazione di despeckle con parametri XY")

  • quando l'utente ha finito, invia i comandi al server e li applica all'immagine a dimensione intera sul lato server

  • fornisce l'immagine finale per la memorizzazione (magari come download sul lato client o per l'archiviazione in alcuni servizi cloud)

risposta data 19.01.2018 - 16:09
fonte
2

Se fossi in me, probabilmente lo implementerei localmente sulla macchina degli utenti usando un toolkit basato su GPU come WebGL. Ciò consente di eseguire l'elaborazione molto rapidamente e in parallelo. Questo risolve diversi problemi:

  • riduce la larghezza di banda, l'archiviazione e la potenza dal momento che non invii le immagini al / dal server
  • aumenta la privacy perché i dati degli utenti non abbandonano mai la loro macchina
  • riduce la responsabilità perché non stai memorizzando (anche temporaneamente) materiale illegale sui tuoi server (materiale coperto da copyright, qualcosa di indecente o di sfruttamento)

Sono d'accordo con Doc Brown che lavorare su proxy e lavorare su piastrelle può migliorare le prestazioni se lo fai nel modo giusto.

    
risposta data 20.01.2018 - 06:09
fonte
1

Molto simile alla risposta di Doc Brown:

  • lascia che l'utente scelga il file usando dropzonejs o qualcosa di simile. Non caricare ancora il file sul server;
  • crea una tela HTML che contiene una versione ridotta dell'immagine;
  • applica filtri ed effetti sulla piccola tela utilizzando le librerie Javascript come filterous o CamanJS . Solo front-end in tempo reale;
  • registra anche le operazioni (al front-end);
  • POST l'immagine originale e l'elenco delle operazioni sul server;
  • applica le stesse operazioni utilizzando lo stesso codice Javascript, ma questa volta sul lato server. Scrivi una pagina PhantomJS & script per questa materia.
risposta data 19.01.2018 - 22:28
fonte

Leggi altre domande sui tag

Che cos'è una versione vanilla e che software dovrebbe dover distinguere da una versione vanilla? [duplicare] Quale dei principi SOLID ha avuto l'effetto maggiore sul tuo codice? [chiuso]