Ci sono due modi in cui puoi gestire questo, in modo semplice e nel modo più difficile.
The Easy Way: Utilizzare il Clipboard API. Questa è un'API "HTML5", ma è supportata correttamente solo in Chrome. Ciò ti consentirà di accedere a un'immagine incollata, dagli appunti, come Blob. È quindi possibile inviare questo Blob al server tramite una richiesta XHR2.
The Hard Way: Sfortunatamente, questo è quello che devi fare per tutti i browser tranne Chrome e non è bello. Ti coinvolge nella creazione di un DIV modificabile con contenuti nascosti all'interno di un "incolla elemento target". Questo riceverà l'immagine incollata. Sarà quindi necessario disegnare l'immagine su un <canvas> che dovrà quindi essere convertito in un Blob. Ma aspetta, migliora. Potrebbe inoltre essere necessario eseguire il proxy delle immagini interdominio (lato server) in alcuni casi (probabilmente in molti casi). Questo potrebbe essere necessario se il server che ospita l'immagine non consente le richieste CORS sulle immagini che ospitano. Puoi leggere ulteriori informazioni su questa situazione in this MDN article.
Un uploader basato su javascript che mantengo, Fine Uploader, supporta già il caricamento delle immagini tramite incolla, ma solo in Chrome in questo momento. Ho pensato che avrei affrontato il problema di implementare questo nei browser API non Clipboard se avessi ricevuto abbastanza richieste. Francamente, però, dal momento che la gestione di immagini non abilitate per CORS in browser che non implementano l'API Clipboard richiede il proxy del lato immagine del server, difficilmente sembra che valga la pena (a meno che, ovviamente, la mia base utente non mi dica che lo vogliono).
Spero che questo aiuti.
fonte
2013-04-12 02:20:22
Perché il voto basso? –
Non ho votato, ma direi che è perché stai chiedendo una soluzione senza prima provare qualcosa. – Daedalus
Ho provato prima di pubblicare questa domanda come faccio sempre ma quello che ho trovato non funzionava o solo su Chrome quindi non pensavo valesse la pena pubblicarlo –