Entwickler-Ecke
Programmiersprachen (Client) - Image clientseitig resizen mit JavaScript
jaenicke - Fr 01.06.07 01:12
Titel: Image clientseitig resizen mit JavaScript
Hallo!
Ich biete auf einem Webspace einen Image-Upload an. Bisher werden die Bilder serverseitig mit PHP auf Vorschaugröße gebracht und dieses kleine Bild zusätzlich gespeichert.
Das Problem ist jedoch, dass der Server dabei stark belastet wird. (Es laufen parallel ja viele Prozesse.)
Aus diesem Grund lagere ich so viele Sachen wie möglich auf den jeweiligen Client aus, so dass "nur" Traffic entsteht, die Berechnungen aber nicht auf dem Server passieren.
Jetzt ist die Frage: Wie kann ich nur mit JavaScript (ohne Java, ActiveX o.ä.) ein JPEG in der Größe verändern?
Mein Ansatz sieht so aus:
1. Der Benutzer bekommt ein ganz normales Upload-Formular
2. Die Datei wird hochgeladen
3. Es wird eine Warteseite beim User angezeigt, wobei im onLoad-Event des body-Tags dann folgendes passiert:
3.1 Es wird ein Image-Objekt erzeugt und das vorher hochgeladene Bild hineingeladen
3.2 Jetzt müsste dieses Image-Objekt in der Größe verändert werden
3.3 Das verkleinerte Bild wird gespeichert und hochgeladen
3.4 Die Erfolgsseite wird geladen
Ich denke das könnte so funktionieren, es fehlt mir jedoch die Möglichkeit, das Bild in der Größe zu verändern. Ich nehme an, dass es da irgendwelche Frameworks gibt, und ich habe auch ein paar Sachen gesehen, die so aussahen als ob es das wäre, aber irgendwie war da nix dabei, was ich direkt hätte benutzen können (oder ich habe nicht erkannt wie...).
Kann mir da jemand Tipps geben, womit das geht oder was ich da benutzen könnte?
Vielen Dank schonmal,
Schönen Gruß,
Sebastian Jänicke
Danniolo - Di 05.06.07 23:00
Ich denke, vor allem weil JS keine Dateisystemfunktionalitäten besitzt, wird das nicht möglich sein.
Dein Server muss wohl oder übel mit der Last zurechtkommen.
Diskette - Mo 11.06.07 20:04
Wieso machst du´s nicht einfach beim einbinden kleiner?
Also mit: <img src="bild.jpg" width="200" height="200">
Marco D. - Mo 11.06.07 20:10
Diskette hat folgendes geschrieben: |
Wieso machst du´s nicht einfach beim einbinden kleiner?
Also mit: <img src="bild.jpg" width="200" height="200"> |
Es geht darum, die Datei selber kleiner zu machen und nicht nur die Anzeige.
Danniolo - Mi 13.06.07 22:15
Tja, mit PHP geht das ganz einfach das ist klar. Allerdings ist es ja das Problem des
jaenicke, dass ihm dieses serverseitige Verkleinern mit PHP zu rechenintensiv ist und er nach einer Möglichkeit sucht, das clientseitig ausführen zu lassen.
Wie gesagt glaube ich aber nach wie vor, dass dies (zumindest mit JavaScript) unmöglich ist.
Agawain - Mi 13.06.07 22:30
Ich liebe google 8)
http://www.webmaster-resource.de/tricks/javascript/bild-durch-anklicken-vergroessern-oder-verkleinern.php
Gruß Aga
PS, sogar weniger Traffic, da die Thumbs nicht auf dem Server gespeichert werden müssen
Das PS nehm ich wieder zurück, denn das ist eine Methode, die doch nur die Anzeigegröße verändert.
Was also letztendlich sogar mehr Traffic erzeugt, denn die Dateigröße, also die physische bleibt erhalten...mal wieder zu kurz gedacht...obwohl ansich nicht dagegen, daß JS eine Datei schrumpfen läßt, solange JS nicht auf der clientseitigen HD speichert.
Aber geht halt nicht, was aber gehen müßte, wäre ein applet, das darf zwar auch nicht alles, aber ansich steht der volle Sprachumfang von Java zur Verfügung.
Also könnte das gehen.
Ansonsten hilft nur serverseitiges verkleiner, oder, wenn auch eine wenig elegante Methode...
Die Bilder erst am nächsten Tag frei zu schalten, bzw. zur Verfügung zu stellen und die ganze Bildverkleinerungsprezedur an einen cron-job zu hängen, der Nachts läuft.
Danniolo - Do 14.06.07 14:58
Agawain hat folgendes geschrieben: |
Ansonsten hilft nur serverseitiges verkleiner, oder, wenn auch eine wenig elegante Methode...
Die Bilder erst am nächsten Tag frei zu schalten, bzw. zur Verfügung zu stellen und die ganze Bildverkleinerungsprezedur an einen cron-job zu hängen, der Nachts läuft. |
Also das ist das eleganteste was es gibt. Alles andere ist nicht wirklich elegant (z.b. Java-Applet o.ä.).
Agawain - Do 14.06.07 19:58
Irgendwie haste da recht, hatte nur an den Kunden gedacht, der ungeduldig einen Tag warten muß.
Demgegenüber steht, daß viele Kunden kein Java druf haben, oder sich auch weigern könnten, ein applet runterzuladen, bzw. Java deaktiviert haben.
Außerdem läuft Java ja in einer geschlossenen Box, da es schwierig sein dürfte, den Browser zu überreden, das Bild auszuliefern, müßte man das Bild hochladen und das Apllet müßt es dann wieder runterladen...etwas sehr nach von hinten durch die Brut ins Auge :wink:
Gruß
Aga
Mir ist da gerade noch was eingefallen, man könnte ja beide Methoden miteinander kombinieren.
Also Bilder sofort zur Verfügung stellen, wenns nicht mit dem Traffic kritisch wird.
Javascript sorgt dafür, daß, wenn thumb nicht vom Server geliefert werden kann, das Ori verkleinert dargestellt wird.
Nachts läuft der Cron-Job und dann ist das erledigt.
blackbirdXXX - So 17.06.07 02:12
Klar kannst du das. Du musst dir nur den Algorithmus in JavaScript implementieren. Aber da JavaScript keine Arrays oder Integer hat wird das ein eher laaaaaaaaaaaaaaaaaaaaangsames Verfahren.
blackbirdXXX - So 17.06.07 10:18
Ghostwalker hat folgendes geschrieben: |
Die treiben da Sachen....wirklich interresant :shock: |
Wird ihm aber nicht helfen, weil beide nix mit Grafiken tun. Hättest du ihm dojo gegeben hätte ihm das mehr gebracht.
Danniolo - So 17.06.07 12:01
Oh, hätt ich nicht gedacht, dass das wirklich möglich ist.
Naja - man lernt nie aus^^
blackbirdXXX - So 17.06.07 12:36
Danniolo hat folgendes geschrieben: |
Oh, hätt ich nicht gedacht, dass das wirklich möglich ist.
Naja - man lernt nie aus^^ |
Sehr witzig. Eine Integer/Array lose Sprache ist trotzdem Turing-komplett. Warum sollte soetwas also nicht möglich sein?
Danniolo - So 17.06.07 12:42
Ich habe es mir einfach nich denken können bzw. die Durchführbarkeit / usability bezweifelt.. Was ist daran so unverständlich?!
jaenicke - Sa 30.06.07 18:06
Vielen Dank!
Mit dem Code geht es (wenn auch leider ja nicht in allen Browsern).
Nach langem Herumprobieren habe ich jetzt eine Lösung gefunden, bei der möglichst viel (je nachdem was der Browser unterstützt) an den Client ausgelagert wird. Insgesamt konnte ich die durchschnittliche Serverlast bei ungefähr gleichbleibender Besucherzahl um ca. 80% reduzieren, so dass ich da jetzt keine Probleme mehr habe.
Also nochmal vielen Dank!
Schönen Gruß,
Sebastian
Entwickler-Ecke.de based on phpBB
Copyright 2002 - 2011 by Tino Teuber, Copyright 2011 - 2024 by Christian Stelzmann Alle Rechte vorbehalten.
Alle Beiträge stammen von dritten Personen und dürfen geltendes Recht nicht verletzen.
Entwickler-Ecke und die zugehörigen Webseiten distanzieren sich ausdrücklich von Fremdinhalten jeglicher Art!