Ich suche nach einer Möglichkeit, die Größe eines Bildes clientseitig mit JavaScript zu ändern (Größe wirklich ändern, nicht nur Breite und Höhe ändern).
Ich weiß, dass dies in Flash möglich ist, möchte es aber nach Möglichkeit vermeiden.
Gibt es irgendwo im Web einen Open-Source-Algorithmus?
javascript
image
resize
client-side
geraud
quelle
quelle
Antworten:
Hier ist ein Kern, der dies tut: https://gist.github.com/dcollien/312bce1270a5f511bf4a
(eine es6-Version und eine .js-Version, die in einem Skript-Tag enthalten sein können)
Sie können es wie folgt verwenden:
Es enthält eine Reihe von Support-Erkennungen und Polyfills, um sicherzustellen, dass es in so vielen Browsern funktioniert, wie ich verwalten kann.
(GIF-Bilder werden ebenfalls ignoriert - falls sie animiert sind)
quelle
imageSmoothingEnabled
für alle Benutzer mit Qualitätsverlust (Resampling) den Canvas-Kontext auf true` undimageSmoothingQuality
tohigh
. In Typoskript sieht dieser Block wie folgt aus:const ctx = canvas.getContext('2d'); ctx.imageSmoothingEnabled = true; (ctx as any).imageSmoothingQuality = 'high'; ctx.drawImage(image, 0, 0, width, height);
Die Antwort darauf lautet Ja. In HTML 5 können Sie die Größe von Bildern clientseitig mithilfe des Canvas-Elements ändern. Sie können die neuen Daten auch nehmen und an einen Server senden. Siehe dieses Tutorial:
http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/
quelle
Wenn Sie vor dem Hochladen die Größe geändert haben, habe ich gerade diese http://www.plupload.com/ herausgefunden.
Es macht die ganze Magie für Sie in jeder erdenklichen Methode.
Leider wird nur die HTML5-Größenänderung mit dem Mozilla-Browser unterstützt, aber Sie können andere Browser auf Flash und Silverlight umleiten.
Ich habe es gerade versucht und es hat mit meinem Android funktioniert!
Ich habe http://swfupload.org/ in Flash verwendet, es macht den Job sehr gut, aber die Größe der Größe ist sehr klein. (kann sich nicht an das Limit erinnern) und kehrt nicht zu HTML4 zurück, wenn Flash nicht verfügbar ist.
quelle
http://nodeca.github.io/pica/demo/
In modernen Browsern können Sie Canvas zum Laden / Speichern von Bilddaten verwenden. Sie sollten jedoch einige Dinge beachten, wenn Sie die Bildgröße auf dem Client ändern:
quelle
Vielleicht mit dem Canvas-Tag (obwohl es nicht portabel ist). Es gibt einen Blog darüber , wie ein Bild mit Leinwand zu drehen , hier , ich nehme an, wenn Sie es drehen kann, kann man die Größe kann. Vielleicht kann es ein Ausgangspunkt sein.
Siehe auch diese Bibliothek .
quelle
Sie können ein Javascript-Bildverarbeitungsframework für die clientseitige Bildverarbeitung verwenden, bevor Sie das Bild auf den Server hochladen.
Unten habe ich MarvinJ verwendet , um einen ausführbaren Code basierend auf dem Beispiel auf der folgenden Seite zu erstellen: "Verarbeiten von Bildern auf der Clientseite vor dem Hochladen auf einen Server"
Grundsätzlich verwende ich die Methode Marvin.scale (...), um die Bildgröße zu ändern. Dann lade ich das Bild als Blob hoch ( mit der Methode image.toBlob () ). Der Server antwortet mit einer URL des empfangenen Bildes.
quelle
Ja, mit modernen Browsern ist dies völlig machbar. Es ist sogar möglich, die Datei speziell als Binärdatei hochzuladen, nachdem eine beliebige Anzahl von Canvas-Änderungen vorgenommen wurde.
http://jsfiddle.net/bo40drmv/
(diese Antwort ist eine Verbesserung der akzeptierten Antwort hier )
Denken Sie daran, die Ergebnisübermittlung in PHP mit etwas Ähnlichem zu erfassen:
Wenn Sie sich über Vitalys Punkt Sorgen machen, können Sie versuchen, das Zuschneiden und Ändern der Größe der funktionierenden Geige zu übernehmen.
quelle
Nach meiner Erfahrung war dieses Beispiel die beste Lösung zum Hochladen eines Bilds mit geänderter Größe: https://zocada.com/compress-resize-images-javascript-browser/
Es verwendet die HTML5-Canvas-Funktion.
Der Code ist so einfach:
Diese Option hat nur einen Nachteil und hängt mit der Bilddrehung zusammen, da EXIF-Daten ignoriert werden. Woran ich gerade arbeite. Wird aktualisiert, nachdem ich damit fertig bin.
Ein weiterer Nachteil ist der Mangel an Unterstützung für IE / Edge, an dem ich ebenfalls arbeite. Obwohl es Informationen im obigen Link gibt. Für beide Themen.
quelle