Moin,
ich möchte ein recht einfaches aber spezielles Webtool erstellen, da ich mit Webtechnikern aber nicht so wahnsinnig vertraut bin hoffe ich ihr könnt mir vielleicht einen Ansatz liefern.
Es geht um das Einpassen von Fotos in einen speziell geformten Rahmen. D.h. auf einer Webseite soll der Rahmen dargestellt werden, man soll ein Foto einfügen und dann dann nach Belieben skalieren, rotieren und verschieben können. Dargestellt werden soll das Ergebnis selbstverständlich im Inneren des Rahmens im Hintergrund.
Schlussendlich soll die Möglichkeit bestehen den herausgearbeiteten Fotoausschnitt in quadratischer Form inkl. einer darauf projizierten Schnittkontur in maximal möglicher Qualität herunterzuladen.
Wie geht man da ran? Rein über Platzierung im DOM oder innerhalb eines Canvas-Elements? Und wie bekomme ich schlussendlich die maximal mögliche Auflösung wenn ich das Ganze z.B. in einem Canvas angepasst an eine Smartphone-Bildschirm-Größe bearbeite? Bei Abschluss mit Positionierungs-, Skalierungs- und Rotationsparametern ein "hidden" Canvas erstellen und dessen Inhalt dann wieder als Rastergrafik ausgeben?
Canvas, wenn alles zurechtgerückt ist Knopfdruck, Werte an Server schicken, der generiert dann aus dem Originalbild das Endprodukt, dann kann man dann runterladen. Aufm Canvas arbeitet man mit einer runterskalierten Version des Bildes, ich schätze mal die Originalbilder haben eine höhere Auflösung als gängige Displays vor allem Smartphones, zum Ausrichten, hochzoomen und rumschieben reicht das. Die Werte kannst du dann auf dem Client schon umrechnen oder machst es auf dem Server das ist praktisch wurscht nur das Arbeiten auf dem Orignalbild würde ich auf dem Server machen, vor allem wenn das kommerziell werden soll.
Also die Funktionalität, die bei gefühlt jeder dritten Webanwendung zum Hochladen&Anpassen des Konto-Profil-Bildes vorhanden ist?
Gibt's bestimmt was fertiges, ansonsten passt der Weg über den Canvas schon.
Du kannst den Canvas schon auf voller Bild-Auflösung lassen, und nur die Anzeige (z.B. für das Smartphone) runterskalieren. canvas.toDataUrl(jpeg) spuckt trotzem ein Bild mit den Canvas-Abmessungen in Pixeln aus.
nur das Arbeiten auf dem Orignalbild würde ich auf
dem Server machen, vor allem wenn das kommerziell werden soll.
Genau dann würde ich das am Client machen... Rechenzeit (und RAM) am Client ist kostenlos (natürlich nicht für den User...), am Server kostet sie. Also Bildbearbeitung auf dem User-Endgerät, nur das fertig skalierte und beschnittene Bild geht an den Server.
Wenn es nur um Skalieren, Rotieren und Verschieben geht, lässt sich das ja leicht in Parametern festhalten.
Zur Produktion des Endresultates würde ich mal über SVG nachdenken. Da kann man nämlich auch Pixelbilder einbetten, gedreht, skaliert und (optisch) beschitten, ohne dass man die Originaldaten tatsächlich anfassen muss ...
Ich würde das wie Frank sagt einfach als SVG darstellen.
Das Einbinden von Rastergrafiken, Skalieren, Rotieren, Translatieren etc. sind da ja bereits eingebaute Features von SVG, man müsste also nur per Javascript die entsprechenden Werte des SVG ändern.
Und die automatische Anpassung an unterschiedliche Display-Grössen bei der Darstellung (ohne dass es etwas an Qualität des Endproduks ändert) wäre da ebenfalls ein bereits eingebautes Feature.
Und wenn der Benutzer dann am Ende auf "Herunterladen" klickt, wird diese SVG-Grafik direkt clientseitig in eine Rastergrafik beliebig festlegbarer Grösse umgewandelt und der Benutzer kann sie als JPG/PNG herunterladen.
Ich frage mich allerdings, wie die Aussage "in maximal möglicher Qualität" genau zu interpretieren ist?
ohne dass man die Originaldaten tatsächlich anfassen muss ...
Dann bleibt das 48 Megapixel Bild unangetastet für die Verwendung als
User-Icon 😬🫣
Nö. Es gibt JS-Libs, die ermöglichen es, den "View", also das gerenderte SVG herunterzuladen. Am Ende ist nämlich alles, was man auf dem Bildschirm sehen kann, Pixel.
Hey,
danke, habe inzwischen die Grundfunktionalität mittels Canvas zusammengebaut. Nur die Übertragung des Endergebnisses mit Schnittkontur auf ein höherauflösendes Canvas-Element und die Downloadmöglichkeit des Inhaltes eben diese Elements steht noch aus.
Als einzige Library kam bis jetzt HammerJS für Touchgesten zum Einssatz, würde ich allerdings nicht unbedingt weiterempfehlen, da hier und da doch noch kleine Bugs drin sind und die nicht mehr behoben werden.
Der Rest ist in herkömmlichem HTML, JS und CSS kein Ding (Im Nachhinein, so ohne nennenswerte Ahnung war es schon ein wenig steinig)
Das runtergeladene Ergebnis soll Drogeriemarkt-Fotodruckerfähig sein, als jpg.
Das sollte kein Ding sein, ist mit 2-3 Zeilen gemacht.
Wegen der Frage der maximal möglichen Qualität: Natürlich entsprechend der Pixel des beschnittenen Ausgangsbildes, mehr geht nur mit AI
Wegen der Frage der maximal möglichen Qualität: Natürlich entsprechend
der Pixel des beschnittenen Ausgangsbildes, mehr geht nur mit AI
Der Benutzer kann das Ausgangsbild ja aber doch auch u.A. drehen etc. Sagen wir, man nimmt ein Ausgangsbild mit einer Auflösung von 4000x3000 Pixeln, dreht das dann um 50° im Uhrzeigersinn - bei welcher Auflösung hat das so transformierte Bild dann die "maximal mögliche" Qualität? Vielleicht habe ich auch gerade nur einen Denkfehler, aber die Antwort erscheint mir nicht völlig offensichtlich.
Ich vermute, dass Du für die Auflösung des fertigen Bildes eine vglw. einfache Formel nimmst, z.B.: Wenn das Ausgangsbild 4000x3000 gross ist, dann ist das Endbild halt 3000x3000 gross, unabhängig von den Parametern für Drehung, Verschieben und Skalieren.
