Image Resize prima di caricare

Question

ho bisogno di fornire un mezzo per un utente di caricare le foto al loro sito web in formato jpeg. Tuttavia, le foto sono molto grandi nelle dimensioni originali e vorrei ridimensionarle prima che l'opzione di caricamento sia molto semplice per l'utente. Sembra che le mie uniche opzioni siano un'applicazione client che ridimensiona le foto prima di caricarle tramite un servizio Web o un hook JavaScript sul lato client durante l'operazione di caricamento che ridimensiona le immagini. La seconda opzione è molto incerta perché non ho una libreria di ridimensionamento delle immagini JavaScript e sarà difficile ottenere JavaScript per eseguire il mio attuale strumento di ridimensionamento, ImageMagick.

Sono sicuro che questo non è uno scenario troppo raro, e alcuni suggerimenti o puntatori ai siti che lo fanno saranno apprezzati.

Answer 1

sono disponibili diverse opzioni:

1. Java
2. ActiveX (solo su Windows)
3. Silverlight
4. Flash
5. Flex
6. Google Gears (la versione più recente è in grado di ridimensionare e trascina e rilascia dal desktop)

Ho fatto molte ricerche cercando una soluzione simile a quello che hai descritto e ci sono molte soluzioni là fuori che variano molto in termini di qualità e flessibilità.

Il mio suggerimento è trovare una soluzione che faccia l'80% di quello che ti serve e personalizzalo in base alle tue esigenze.

Answer 2

Penso che è necessario Java o ActiveX per questo. Ad esempio Thin Image Upload

Answer 3

Purtroppo non sarà possibile ridimensionare le immagini in Javascript. È possibile in Silverlight 2 tho.

Se si desidera acquistare qualcosa già fatto: Aurigma Image Uploader è piuttosto impressionante - $ 250 USD per le versioni ActiveX e Java. Ci sono alcuni demo sul sito, sono abbastanza sicuro che Facebook usi lo stesso controllo.

Answer 4

Cosa Jao e russau dicono è vero. Il motivo è che JavaScript non ha accesso al filesystem locale per motivi di sicurezza. Se JavaScript può "vedere" i tuoi file immagine, potrebbe vedere qualsiasi file e questo è pericoloso.

È necessario un controllo a livello di applicazione per poter eseguire questa operazione e ciò significa Flash, Java o Active-X.

Answer 5

È compatibile con più tecnologie Plupload tool che dichiara che è possibile eseguire il ridimensionamento prima del caricamento, ma non l'ho ancora provato. Ho trovato anche una risposta adatta nel mio question about binary image handling javascript libs.

Answer 6

Nel 2011, possiamo sapere farlo con File API e canvas. Questo funziona per ora solo in firefox e chrome. Ecco un esempio:

var file = YOUR_FILE, 
    fileType = file.type, 
    reader = new FileReader(); 

reader.onloadend = function() { 
    var image = new Image(); 
     image.src = reader.result; 

    image.onload = function() { 
    var maxWidth = 960, 
     maxHeight = 960, 
     imageWidth = image.width, 
     imageHeight = image.height; 

    if (imageWidth > imageHeight) { 
     if (imageWidth > maxWidth) { 
     imageHeight *= maxWidth/imageWidth; 
     imageWidth = maxWidth; 
     } 
    } 
    else { 
     if (imageHeight > maxHeight) { 
     imageWidth *= maxHeight/imageHeight; 
     imageHeight = maxHeight; 
     } 
    } 

    var canvas = document.createElement('canvas'); 
    canvas.width = imageWidth; 
    canvas.height = imageHeight; 

    var ctx = canvas.getContext("2d"); 
    ctx.drawImage(this, 0, 0, imageWidth, imageHeight); 

    // The resized file ready for upload 
    var finalFile = canvas.toDataURL(fileType); 
    } 
} 

reader.readAsDataURL(file); 

Answer 7

Soluzione JavaScript pura. Il mio codice ridimensiona JPEG con interpolazione bilineare, e non perde exif.

https://github.com/hMatoba/JavaScript-MinifyJpegAsync

function post(data) { 
    var req = new XMLHttpRequest(); 
    req.open("POST", "/jpeg", false); 
    req.setRequestHeader('Content-Type', 'image/jpeg'); 
    req.send(data.buffer); 
} 

function handleFileSelect(evt) { 
    var files = evt.target.files; 

    for (var i = 0, f; f = files[i]; i++){ 
     var reader = new FileReader(); 
     reader.onloadend = function(e){ 
      MinifyJpegAsync.minify(e.target.result, 1280, post); 
     }; 
     reader.readAsDataURL(f); 
    } 
} 

document.getElementById('files').addEventListener('change', handleFileSelect, false);