nicht angemeldet
Der Martin
Jonathan Harker
Rolf B
Der Martin
Rolf B
Rolf B
Gunnar Bittersmann
Hallo zusammen,
ich nutze SCEditor und kann per Copy & Paste Bilder direkt in das WYSIWYG-Textfeld einfügen. Das Bild wird dabei als data:image/png;base64,... eingefügt.
Das Problem: Die eingefügten Bilder erscheinen etwa 1,2-mal größer als das Original. Das könnt Ihr in der Online-Demo auch selber reproduzieren, wenn gewünscht. Das Verhalten tritt insbesondere bei Bildausschnitten auf. Bei kompletten Bildern scheint es nicht aufzutreten.
Die zugrunde liegende Funktion scheint folgende zu sein:
handlePasteEvt = function (e) {
var editable = wysiwygBody;
var clipboard = e.clipboardData;
var loadImage = function (file) {
var reader = new FileReader();
reader.onload = function (e) {
handlePasteData({
html: '<img src="' + e.target.result + '" />'
});
};
reader.readAsDataURL(file);
};
};
Hat jemand eine Idee, woran das liegen könnte und wie ich die Bilder in ihrer Originalgröße einfügen kann?
Danke im Voraus! 😊
Luke
Hallo,
Hat jemand eine Idee, woran das liegen könnte und wie ich die Bilder in ihrer Originalgröße einfügen kann?
die Kernfrage ist vermutlich: Wie definierst du Originalgröße?
Viele Bildformate (Windows-Bitmap, JPEG, PNG) enthalten im Datei-Header eine Angabe darüber, wie groß sie denn "in echt" sein wollen. Üblicherweise verklausuliert als "soundsoviele Pixel pro Zoll" (dpi).
Wenn da ein plausibler Wert drinsteht, skalieren die meisten Programme das Bild dementsprechend. Nur wenn der dpi-Wert 0 ist, erfolgt die Darstellung meist exakt Pixel zu Pixel.
Einen schönen Tag noch
Martin
Hallo Luke,
Hallo zusammen,
ich nutze SCEditor und kann per Copy & Paste Bilder direkt in das WYSIWYG-Textfeld einfügen. Das Bild wird dabei als data:image/png;base64,... eingefügt.
Das Problem: Die eingefügten Bilder erscheinen etwa 1,2-mal größer als das Original.
Man kann Bilder ein width-Attribut geben oder die width mit CSS setzen.
Denn es ist egal, wie groß die Bilder sind. Wichtig ist, wie groß die Bilder aus der Webseite dargestellt werden sollen.
Hallo Luke,
Das Bild wird dabei als data:image/png;base64,... eingefügt.
Ja, das kann ich bestätigen wenn ich per Windows Snipping-Tool einen Ausschnitt erstelle und einfüge.
Und nein, das kann ich nicht bestätigen, wenn ich auf einem Bild im Browser "Bild kopieren" sage und das einfüge – in dem Fall wird eine http(s)-URL eingefügt.
Das Problem: Die eingefügten Bilder erscheinen etwa 1,2-mal größer als das Original. Das könnt Ihr in der Online-Demo auch selber reproduzieren, wenn gewünscht. Das Verhalten tritt insbesondere bei Bildausschnitten auf.
Leider nein, das kann ich nicht reproduzieren, weder bei Bildern noch bei einem mit dem Snipping-Tool erstellten Ausschnitt. Bei mir ist die Größe 1:1. Das scheint also kein SCEditor-Thema zu sein, sondern irgendwas, was speziell für Dich gilt.
Hypothesen:
Rolf
Hallo Rolf,
ich hatte ansich ein langes, auf alle Punkte eingehendes Post geschrieben, das mir aber leider abhanden gekommen ist.
Daher beschräne ich mich mich jetzt auf das Wesentliche.
Hypothesen:
- Hast Du im Betriebssystem eine Vergrößerung eingestellt? (Welches Betriebssystem ist das?)
Genau daran lag es, vielen Dank für die Hilfe!
Ich hatte einen Zoomfaktor von 175% im Win10 eingestellt.
Sobald ich den heraus nehme, kann ich das Ursprungsproblem ebenfalls nicht mehr reproduzieren.
Mir ist zwar nicht ganz klar, warum sich der Zommfaktor hier so auswirkt, aber nützt ja nichts. Ich arbeite ab jetzt dann mit 100% weiter.
Gruß ins Wochenende,
Luke
Hallo,
Mir ist zwar nicht ganz klar, warum sich der Zommfaktor hier so auswirkt, aber nützt ja nichts. Ich arbeite ab jetzt dann mit 100% weiter.
und damit kannst du arbeiten?? 😲
Für mich sind damit die Schriften und Icons mikroskopisch klein. Je nach Bildschirmgröße ist unter Windows ein systemweiter Zoomfaktor von 125% oder sogar 150% zwingend nötig.
Sonst sehe ich stellenweise keine Schrift mehr, sondern nur noch Fliegenschisse. Zum Beispiel auf meinem Geschäfts-Notebook mit 17" und Full-HD und Windows 10.
Einen schönen Tag noch
Martin
Hallo Martin,
Mir ist zwar nicht ganz klar, warum sich der Zommfaktor hier so auswirkt, aber nützt ja nichts. Ich arbeite ab jetzt dann mit 100% weiter.
und damit kannst du arbeiten?? 😲
Ich verstehe diesen Zoomfaktor irgendwie nicht.
Gerade habe ich testhalber nochmal auf 175% gestellt und siehe da, alles viel zu groß.
Bei mir sehen jetzt die 100% fast genauso aus, wie zuvor die 175%...
Gruß, Luke
Ich verstehe diesen Zoomfaktor irgendwie nicht.
Gerade habe ich testhalber nochmal auf 175% gestellt und siehe da, alles viel zu groß.
Bei mir sehen jetzt die 100% fast genauso aus, wie zuvor die 175%...
Ok, jetzt habe ich es verstanden.
Ich hatte gar nicht 175% Zoomfaktor, sondern "individuelle" 110% eingestellt.
Wenn man aber einen individuellen Zoomfaktor einstellt, zeigt Windows einem ausgegraut immer 175% an. Daher die Verwirrung bei mir.
Luke
Hallo Luke,
ich habe gerade mal mein Windows auf 175% eingestellt und dann mit Snipping-Tool einen Ausschnitt aus dem Edit-Bereich von SCEdit gemacht und dann eingefügt.
Das eingefügte Bild war 166px breit und war zu groß. Taschenrechner sagt: 166 / 1.75 ≈ 95 – ich habe also dem Bild width:95px gegeben und es hatte die richtige Größe.
Heißt also: Das Snipping-Tool hat den Bildschirm Pixel für Pixel ausgelesen, weshalb der Snip um 175% zu geworden ist.
Danach habe ich auf 100% zurückgestellt. Alles wurde kleiner, das Bild auch.
Heißt also letztlich: Das Snipping-Tool erstellt eine Bitmap ohne dpi-Angaben, so dass beim Einfügen keine Chance besteht, dem eingefügten Bild die richtige intrinsische Größe zu geben. Ich habe aber auch nicht wirklich eine Ahnung, ob das ein Fehler von Snip ist, vom verwendeten Grafikformat der data-URL oder ob es möglicherweise prinzipiell nicht geht.
Rolf
Hallo Rolf,
ich habe gerade mal mein Windows auf 175% eingestellt und dann mit Snipping-Tool einen Ausschnitt aus dem Edit-Bereich von SCEdit gemacht und dann eingefügt.
Das eingefügte Bild war 166px breit und war zu groß. Taschenrechner sagt: 166 / 1.75 ≈ 95 – ich habe also dem Bild width:95px gegeben und es hatte die richtige Größe.
Naja, ok. Würde bedeutet, wenn ich das nur für mich nutze und da der Data-string vor dem Upload ohnehin in ein Image gewandelt wird, könnte man die Pixelbreite auslesen und anschließend dem img-tag eine definierte Breite mitgeben.
Aber wie ich Martin schon schrieb, ist der Zoomfaktor 175%, mit dem ich seit Jahren mit diesem Laptop gearbeitet habe, nun viel zu groß geworden und die 100% Skalierung passt eigentlich.
Gruß, Luke
Heißt also letztlich: Das Snipping-Tool erstellt eine Bitmap ohne dpi-Angaben, so dass beim Einfügen keine Chance besteht, dem eingefügten Bild die richtige intrinsische Größe zu geben.
Excat. DPI-Angaben in Bitmaps sind für Drucker relevant, wenn überhaupt. Ansich sind sie überflüssig und maximal verwirrend.
Mit wie viel DPI soll mann denn ein Bitmap auf einem Bildschirm darstellen? Die Frage ist doch schon absurd.
Hallo Mitleser 2.0,
Mit wie viel DPI soll mann denn ein Bitmap auf einem Bildschirm darstellen?
So, dass sie in Originalgröße erscheint?
Wenn der Bildschirm 96dpi hat und die Bitmap 300dpi, dann ist es durchaus sinnvoll, die Bitmap für die Anzeige auf ca. 31% zu skalieren, damit sie in Originalgröße angezeigt wird.
Wenn die Anwenderin die Darstellung dann vergrößern möchte, steht es ihr ja frei, das zu tun.
Das Problem ist leider oft, dass das Betriebssystem die physische Größe des Bildschirms nicht kennt, weil der ihr das nicht mitteilt, oder es ignoriert diese Mitteilung einfach.
Mein Firmenlaptop hat 1920×1200 Pixel bei 14 Zoll (so in etwa, bin gerade lineal-los), das sind 162dpi. Der Zusatzbildschirm hat 1920×1200 Pixel bei 24 Zoll, das sind 94dpi. Das Auflösungsverhältnis ist also ca 1,72, aber Windows "empfiehlt" mir eine Skalierung um 150% und bemaßt die Darstellung entsprechend.
Weshalb ein Bild "in Originalgröße" auf dem Laptop um 14% oder so kleiner ist als auf dem großen Bildschirm und das Übertragen eines Screenshots vom Laptop-Bildschirm in ein Malprogramm auf dem Zusatzbildschirm in "Originalgröße" nicht funktioniert. Korrekte Kenntnis der Bildschirmphysik in Betriebssystems und Anwendungssoftware würde das lösen. Aber offenbar interessiert das keinen, und wir haben uns an dieses Größenchaos so gewöhnt, dass wir es für absurd halten, es richtig zu machen…
Rolf
Hey RolfB.
Könnte man aus Deinen Ausführungen eventuell schlussfolgern, dass eine DPI-Angabe für Bitmaps in der Darstellung auf Bildschirmen ein müssiges, wenn nicht gar überflüssiges Unterfangen ist? So habe ich mich zumindest seit langem mit der Thematik arrangiert und verfolge es immer wieder amüsiert.
Wenn der "Bildautor" meint (das tut er nicht, sondern seine Kamera tut das gewöhnlich), dass eine bestimmte DPI-Zahl zu gelten hat, dann kann ich dem nur folgen, soweit es um einen Ausdruck in einer definierten Zielgröße geht. Papier also eher als ein Bildschirm.
@@Luke
Das Bild wird dabei als data:image/png;base64,... eingefügt
In deiner Vorschau? Oder ist es als solches dann auch auf der Webseite?
Auf der Webseite sollte ein Bild nicht als Base 64 eingebettet werden; das wird dann unnötig groß.
Und über welche Art PNG reden wir hier eigentlich? PNG-8 oder PNG-24? Letzteres ist fürs Web nicht geeignet, weil viel zu groß.
Jolan tru
Hi Gunnar,
In deiner Vorschau? Oder ist es als solches dann auch auf der Webseite?
Auf der Webseite sollte ein Bild nicht als Base 64 eingebettet werden; das wird dann unnötig groß.
In der Vorschau.
Bevor aber der Inhalt dieser Textarea in die db übergeht, mache ich ein image daraus und ersetze den data-string durch ein [img]-bbcode-tag.
Luke