Code Monkey home page Code Monkey logo

Comments (3)

christophboecker avatar christophboecker commented on August 17, 2024

Hi Oliver,
ich bin mir nicht sicher, ob ich Deine Idee mit dem Zoom richtig verstande habe. Aber hiermal mein Ansatz, den ich grade realisiere:

Ausgangspunkt: der Resize-Effekt (auch der in focuspoint) macht halt nicht was ich gerne hätte. Wenn ich z.B. ein 1200x800-Bild nach 400x200 verkleinern will, ist je nach Parameter das Ergebnis größer, mit schwarzen Rändern oder gestaucht. Meine Ziel ist, das Bild bestmöglich einzupassen und den Rest abzuschneiden. Im Beispiel würde also über die Breite eingepasst und der Überstand in der Höhe oben und unten je 100 gekappt. Focuspoint ermöglich natürlich, den Kappbereich intelligent zu wählen.

Und natürlich: wenn der Zielbereich deutlich kleiner ist als das Original, geht womöglich zu viel verloren. Zoom? Zoom!

Mein Effekt focuspoint_fit arbeitet so:

Parameter

  • Zielbild-Größe: Höhe und/oder Breite. Falls eine Angabe fehlt, wird sie über die AspectRatio des Originalbildes ermittelt.
  • Default für den Fokus: Falls das Bild keinen Fokuspunkt (med_focuspoint_css) hat, werden die Default-Werte genommen. Angabe als %-Wert. Default ist 50/50 = Mitte
  • Zoom-Faktor: Im ersten Wurf mal ein Select mit 0/25/50/75/100.

Vorgehen

  • Zoom: Wenn wie im obigen Beispiel aufgrund der Seitenverhältnisse über die Breite angeglichen wird, würde über die Breite der Restplatz ermittelt. Beispiel: 800 px als Delta von 1200 (Bild) und 400 (Ziel). Dieses Delta wird mit dem Zoom-Faktor multipliziert. 25% Zoom = 200px. Um diesen Betrag wird der Auschnitt in der Breite des Ausschnitts auf 600px vergrößert. Unter Beibehaltung des AspectRatio des Zielbildes erhöht sich die Ausschnittshöhe auf 300.
  • Auschnitt platzieren: Der Auschnitt wird erst mal mittig um den Focuspoint ausgerichtet. Falls der Auschnitt übersteht, wird er so verschoben, dass er wieder innerhalb des Bildes liegt. Der FP ist dann natürlich nicht mehr mittig im Ausschnitt. Aber dass lässt sich halt schlecht verhindern - speziell wenn der FP eh im Randbereich liegt.Sonst müsste der Auschnitt verkleinert werden, was die Qualität verschlechtert.
  • Sonderfall "Bild kleiner als Auschnitt": Dann wird der Zoom-Faktor ignoriert und der Ausschnitt proportional so verkleinert, dass er in das Bild passt. Bedeutet letztlich, dass das Bild vegrößert wird. Da die AspectRatio des Zielbereichs maßgeblich ist, würe evtl. auch noch etwas gekappt werden.

Mit diesen Daten reicht dann ein einziges imagecopyresampled, um das Zielbild zu erstellen.

Die Frage "enlarge or no_enlarge" stelle ich nicht :-). Für knapp zu kleine Bilder ist es wurscht und für stark zu kleine Bilder sollte man besser mal darüber nachdenken, andere Bilder zu nehmen. Imho.

Die Sache mit minimized/maximized schenke ich mir auch komplett. Halte ich für überflüssig wenn eh ein Auschnitt genommen wird. Gestaucht wird auch nix.

Der Effekt funktioniert übrigens auch unabhängig von focuspoint :-) wegen der Default-Werte

Wäre das die Sache, die Dir vorschwebt? Dann würde ich es etwas runder machen und als Pull einstellen. Oder einfacher: ich schicke Dir die Datei mit dem Effekt per Mail. Mein Vorschlag wäre dann, den Effekt zusätzlich entweder in den Medien-Manager zu übernehmen oder nach focuspoint. Also nicht als Ersatz für resize :-)

Grüße
Chris

(mal sehen wie viele Schreibfehler ich wieder erst nach dem Absenden finde )

from focuspoint.

olien avatar olien commented on August 17, 2024

Hallo Chris,

so viele Gedanken habe ich dazu noch gar nicht gemacht (war ja die Idee von @dergel :-)),

Was Du schreibst hört sich gut an. Vielleicht ist der PR besser hier https://github.com/redaxo/redaxo aufgehoben wenn der Effekt nicht vom Focuspoint abhängig ist. Wenn nicht. Dann sehr gerne hier!

LG
Oliver

from focuspoint.

olien avatar olien commented on August 17, 2024

Ist erledigt. DANKE!

from focuspoint.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.