drawImage Qualität

  • JavaScript

  • Bastifantasti
  • 62884 Aufrufe 3 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • drawImage Qualität

    Hallo,

    für mein Forum wollte ich einbauen, dass User direkt im Browser ihr Avatar anpassen können.
    Sprich: Sie können jedes Bild beliebiger Größe reinladen und dann einen Ausschnitt auswählen und speichern.
    Das klappt soweit ganz super.
    (Habe dazu mit Javascript gearbeitet und mit drawImage auf einen Canvas den Ausschnitt zeichnen lassen, den ich dann später als Bild-Datei speichern kann)

    Allerdings gibt es ein Qualitätsproblem.
    Wenn große Bilder auf 150x150px verleindert werden (das ist die Avatargröße), dann sieht das nicht gut aus.
    Im Internet habe ich Lösungsansätze gefunden, wo empfohlen wurde, das Bild in mehreren Schritten zu verkleinert. Aber das gefällt mir ebenso nicht.

    Ich habe hier mal einen Vergleich:

    1 = mit Photoshop verkleinert | 2 = dirkte Verkleinerung mit drawImage | 3 = In 2 Schritten verkleinert |4 = In 3 Schritten verkleinert (hier wird es ja schon unscharf)

    Keines der Ergebnisse kommt an die mit Photoshop verkleinerte Version ran.
    Gibt es da Alternativen? Muss doch irgendwie zu realisieren sein...

    Ich hoffe, ihr habt da noch Ideen.
  • Schau mal, ob dir das weiterhilft:

    Canvas Größe ändern (Downscale) Bild Hohe Qualität?
    Da, wo die Neurosen blüh'n, da möcht' ich Landschaftsgärtner sein!
    Rechteübersicht * Forenregeln * F.A.Q. * Lexikon
    Suchfunktion * Chat * User helfen User
    Der Minister nimmt flüsternd den Bischof beim Arm: »Halt' du sie dumm, ich halt' sie arm!« (R. Mey)
  • Hi,
    beim einfachen Verkleinern fallen Pixel weg, die das Bild dann kantig und etwas "überscharf" aussehen lassen.
    Darum braucht man das "Resamplen", um einen glatten Übergang zu erzeugen.
    Hier hilft dir NeHes Link auf jeden Fall weiter. (Siehe dir die Schleife an - Ein Canvas-Context sollte für dich auch die Ausgangslage sein)
    Die Methode hast du auch schon angesprochen, wie du aber im Code-Schnipsel siehst, sind weit mehrere Verkleinerungen nötig, als 2 oder 3.

    Weitere Links, die für dich interessant wären:
    Lanczos resampling - Wikipedia
    What is bicubic resampling?
    Resampling Filters -- IM v6 Examples

    Wenn du nicht weiterweist, poste doch mal ein JSFiddle mit deiner Problematik, dann kann man dir besser und Code-näher helfen.

    Gruß!
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.