Bildgröße vor dem Upload

Question

Ich muss ein Mittel bereitstellen, damit ein Benutzer Fotos auf seine Website im JPEG-Format hochladen kann. Allerdings sind die Fotos in der Originalgröße sehr groß, und ich möchte die Größe vor dem Upload sehr einfach für den Benutzer machen. Es scheint, dass meine einzigen Optionen eine clientseitige Anwendung sind, die die Größe der Fotos vor dem Hochladen über einen Webdienst oder einen clientseitigen JavaScript-Hook beim Uploadvorgang ändert, der die Größe der Bilder ändert. Die zweite Option ist sehr vorläufig, da ich keine JavaScript-Bibliothek zur Bildgrößenänderung habe und es schwierig werden wird, das aktuelle Skalierungswerkzeug ImageMagick mit dem JavaScript auszuführen.

Ich bin mir sicher, das ist nicht allzu ungewöhnlich ein Szenario, und einige Vorschläge oder Hinweise auf Websites, die dies tun, werden geschätzt.

Answer 1

Sie haben mehrere Möglichkeiten:

1. Java
2. ActiveX (nur unter Windows)
3. Silverlight
4. Flash
5. Flex
6. Google Gears (die neueste Version ist Lage, die Größe und ziehen Sie sie von Ihrem Desktop ab)

Ich habe viel Forschung auf der Suche nach einer ähnlichen Lösung zu dem, was Sie beschrieben haben, und es gibt viele Lösungen da draußen, die viel in Qualität und Flexibilität variieren.

Mein Vorschlag ist eine Lösung zu finden, die 80% von dem, was Sie brauchen, tun wird und es an Ihre Bedürfnisse anpassen.

Answer 2

Ich denke, dass Sie Java oder ActiveX dafür brauchen. Zum Beispiel Thin Image Upload

Answer 3

Leider können Sie die Größe der Bilder in Javascript nicht ändern. Es ist möglich in Silverlight 2 tho.

Wenn Sie etwas bereits getan kaufen wollen: Aurigma Image Uploader ist ziemlich beeindruckend - $ USD250 für die ActiveX und Java-Versionen. Es gibt einige Demos auf der Website, ich bin mir ziemlich sicher, dass Facebook das gleiche Steuerelement verwendet.

Answer 4

Was jao und russau sagen ist wahr. Der Grund dafür ist, dass JavaScript aus Sicherheitsgründen keinen Zugriff auf das lokale Dateisystem hat. Wenn JavaScript Ihre Bilddateien "sehen" könnte, könnte es jede Datei sehen, und das ist gefährlich.

Sie benötigen ein Steuerelement auf Anwendungsebene, das heißt Flash, Java oder Active-X.

Answer 5

Es gibt mehrere Technologie-fähige Plupload tool, die erklärt, dass es Größenänderung vor dem Upload tun kann, aber ich habe es noch nicht versucht. Ich habe auch eine passende Antwort in meinem question about binary image handling javascript libs gefunden.

Answer 6

Im Jahr 2011 können wir wissen, tun Sie es mit der Datei-API und Canvas. Dies funktioniert jetzt nur in Firefox und Chrome. Hier ist ein Beispiel:

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

Reine JavaScript-Lösung. Mein Code ändert die Größe von JPEG durch bilineare Interpolation und verliert nicht 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);