Zmiana rozmiaru obrazu przed przesłaniem

Question

Potrzebuję zapewnić użytkownikom możliwość przesyłania zdjęć do ich witryny w formacie jpeg. Jednak zdjęcia są bardzo duże w oryginalnym rozmiarze i chciałbym, aby zmiana rozmiaru przed przesłaniem była bardzo łatwa dla użytkownika. Wygląda na to, że jedynymi opcjami są aplikacje po stronie klienta, które zmieniają rozmiar zdjęć przed przesłaniem ich za pośrednictwem usługi internetowej lub po stronie klienta po stronie JavaScript, która zmienia rozmiar obrazów. Druga opcja jest bardzo niepewna, ponieważ nie mam biblioteki do zmiany rozmiaru obrazu JavaScript i trudno będzie uzyskać JavaScript do uruchomienia mojego obecnego narzędzia do zmiany rozmiaru, ImageMagick.

Jestem pewien, że nie jest to zbyt rzadki scenariusz, a niektóre sugestie lub wskazówki do stron, które to robią, zostaną docenione.

Answer 1

Masz kilka opcji:

1. Java
2. ActiveX (tylko w systemie Windows)
3. Silverlight
4. Flash
5. Flex
6. Google Gears (najnowsza wersja jest zdolny do zmiany rozmiaru i przeciągnij i upuść z pulpitu)

Zrobiłem wiele badań w poszukiwaniu podobnego rozwiązania do tego, co opisałeś i istnieje wiele rozwiązań, które różnią się znacznie pod względem jakości i elastyczności.

Moja sugestia to znaleźć rozwiązanie, które wykona 80% tego, czego potrzebujesz i dostosuj go do swoich potrzeb.

Answer 2

Myślę, że potrzebujesz do tego Java lub ActiveX. Na przykład: Thin Image Upload

Answer 3

Niestety nie będzie można zmienić rozmiaru obrazów w JavaScript. Jest to możliwe w Silverlight 2 tho.

Jeśli chcesz kupić coś, co już zostało zrobione: Aurigma Image Uploader jest imponujące - $ 250 USD dla wersji ActiveX i Java. Na stronie są dema, jestem pewien, że Facebook używa tej samej kontroli.

Answer 4

To, co mówią jao i Russau, jest prawdą. Powodem jest to, że JavaScript nie ma dostępu do lokalnego systemu plików ze względów bezpieczeństwa. Jeśli JavaScript może "zobaczyć" twoje pliki graficzne, może zobaczyć dowolny plik i to jest niebezpieczne.

Potrzebna jest do tego kontrola na poziomie aplikacji, a to oznacza Flash, Java lub Active-X.

Answer 5

Istnieje możliwość obsługi wielu technologii Plupload tool, która deklaruje możliwość zmiany rozmiaru przed przesłaniem, ale jeszcze jej nie wypróbowałem. Ja również znajduję odpowiednią odpowiedź w moim question about binary image handling javascript libs.

Answer 6

W 2011 roku możemy to zrobić za pomocą interfejsu API plików i obszaru roboczego. To działa na razie tylko w firefox i chrome. Oto przykład:

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

Czyste rozwiązanie JavaScript. Mój kod zmienia rozmiar JPEG za pomocą interpolacji dwuliniowej i nie traci on 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);