Forum: PC-Programmierung Webtool zur Bildmanipulation - benötige Ansatz


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Chris S. (-fx-)


Lesenswert?

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?

Danke euch

von Herbert B. (Gast)


Lesenswert?

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.

von Εrnst B. (ernst)


Lesenswert?

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.

von Εrnst B. (ernst)


Lesenswert?

Herbert B. schrieb:
> 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.

von Kolja L. (kolja82)


Lesenswert?

Clientseitig ist schon richtig, alleine wegen der UX.

Von solchen Bibliotheken gibt es viele, hier mal eine davon:

https://github.com/nodeca/pica

von Frank E. (Firma: Q3) (qualidat)


Lesenswert?

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 ...

von Kolja L. (kolja82)


Lesenswert?

Frank E. schrieb:
> ohne dass man die Originaldaten tatsächlich anfassen muss ...

Dann bleibt das 48 Megapixel Bild unangetastet für die Verwendung als 
User-Icon 😬🫣

von Joachim S. (oyo)


Lesenswert?

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?

von Frank E. (Firma: Q3) (qualidat)


Lesenswert?

Kolja L. schrieb:
> Frank E. schrieb:
>> ohne dass man die Originaldaten tatsächlich anfassen muss ...
>
> Dann bleibt das 48 Megapixel Bild unangetastet für die Verwendung als
> User-Icon 😬🫣

Kolja L. schrieb:
> Frank E. schrieb:
>> 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.

: Bearbeitet durch User
von Kolja L. (kolja82)


Lesenswert?

Bis auf die Frage kam nichts weiteres von Chris, daher bin ich hier 
vorläufig raus.

von Chris S. (-fx-)


Lesenswert?

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

Chris

von Joachim S. (oyo)


Lesenswert?

Chris S. schrieb:
> 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.

Bitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.