Bildstorleksändring på klientsidan med JavaScript innan uppladdning till servern

Jag letar efter ett sätt att ändra storlek på en bild på klientsidan med JavaScript (verkligen ändra storlek, inte bara ändra bredd och höjd).
Jag vet att det är möjligt att göra det i Flash men jag skulle vilja undvika det om möjligt.

Finns det någon öppen källkodalgoritm någonstans på webben?

Svar #1

Här är en gist som gör detta: https://gist.github.com/dcollien/312bce1270a5f511bf4a

(en ES6-version och en .js-version som kan inkluderas i en script-tagg)

Du kan använda det på följande sätt:

<input type="file" id="select">
<img id="preview">
<script>
document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};
</script>

Det inkluderar en mängd stöd-detektering och polyfills för att se till att det fungerar på så många webbläsare som jag kunde hantera.

(det ignorerar också gif-bilder - ifall de är animerade)

Svar #2

Svaret på detta är ja - i HTML 5 kan du ändra storlek på bilder på klientsidan med hjälp av canvas-elementet. Du kan också ta den nya datan och skicka den till en server. Se denna handledning:

http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

Svar #3

Om du ändrade storlek innan du laddade upp så har jag precis hittat detta http://www.plupload.com/

Det gör all magi åt dig på vilket tänkbart sätt som helst.

Tyvärr stöds HTML5-ändring av storlek endast med Mozilla-webbläsaren, men du kan omdirigera andra webbläsare till Flash och Silverlight.

Jag provade det precis och det fungerade med min Android!

Jag använde http://swfupload.org/ i Flash, det gör jobbet väldigt bra, men storleken för ändring är väldigt liten. (kan inte minnas gränsen) och går inte tillbaka till HTML4 när Flash inte är tillgängligt.

Svar #4

http://nodeca.github.io/pica/demo/

I moderna webbläsare kan du använda canvas för att ladda/spara bilddata. Men du bör tänka på flera saker om du ändrar storlek på bilden på klienten:

  1. Du kommer bara att ha 8 bitar per kanal (jpeg kan ha bättre dynamiskt omfång, cirka 12 bitar). Om du inte laddar upp professionella foton borde det inte vara ett problem.
  2. Var försiktig med ändringsstorleksalgoritmen. De flesta klientbaserade ändringsstorlekar använder trivial matematik, och resultatet är sämre än det kunde vara.
  3. Du kan behöva skärpa nedskalad bild.
  4. Om du vill återanvända metadata (exif och annat) från originalet - glöm inte att ta bort information om färgprofil. För det tillämpas när du laddar bilden till canvasen.

Relaterade artiklar