Ein Freund hat mir ein Telefonfoto und einen Screenshot geschickt und in einem Bild nach einer Auflistung gefragt. Ich habe beides in einer Leinwand in ihren eigenen Größen abgelegt und etwas bekommen, das niemand akzeptieren würde: ein 4032 by 3024-Foto mit einem schmalen 1170-by-2532-Screenshot daneben, ein Band aus leerem Weiß unter dem Screenshot und das Ganze 5202 Pixel breit. Die Bilder waren in Ordnung. Die Anordnung war das Problem, und es ist jedes Mal das gleiche Problem, da die beiden Dateien fast nie eine Dimension haben. Die Entscheidung, welche Achse in einer Reihe aufgestellt werden muss, ist der gesamte Job, und alles andere folgt daraus.
tl; dr: Das Zusammenführen von Bildern ist eine Skalierungsentscheidung, bevor es sich um eine Zeichnung handelt. Seite an Seite passt jedes Bild auf die höchste Höhe an, stapelt die Übereinstimmungen auf die breiteste Breite, und ein Raster passt zu beiden, weshalb ein Raster auch zwischen dem Zuschneiden und dem Platzieren von Platz wählen muss. Gemessen auf einem 4032x3024 Foto neben einem 1170x2532 Screenshot: Seite an Seite erzeugt eine Leinwand 5429x3024 mit dem Screenshot auf 1397x3024 vergrößert, und ein 2-Zellen-Gitter im Cover-Modus 70,2% der Bilder vergrößert. Wählen Sie den Modus aus, an welcher Achse Sie erhalten bleiben möchten. der Zusammenschluss Zeichnet alles auf der Registerkarte Browser, so dass nichts hochgeladen wird.
Warum sehen zusammengeführte Bilder falsch aus?
Weil die Eingaben unterschiedliche Formen haben und die meisten Werkzeuge sie in der Größe zeichnen, die sie ankommen.
Ein Telefonfoto ist 4032 von 3024 in Landschaft. Ein Screenshot des Telefons ist 1170 mal 2532. Ein Scan ist das, was der Scanner entschieden hat. Legen Sie zwei davon in einer nativen Größe in einer Reihe und eine von ihnen über dem anderen, wobei der tote Raum das ausfüllt, was von der höheren Dimension übrig ist. Das liest sich eher als Fehler als als Layout, selbst für jemanden, der Ihnen nicht sagen konnte, warum.
Die Lösung ist zu normalisieren, und die einzige Frage ist, auf welcher Achse. In einer Reihe sind die Ober- und Unterseiten das, was das Auge folgt, also müssen die Höhen übereinstimmen und jedes Bild nimmt jede Breite sein eigenes Seitenverhältnis an und gibt ihm dann. In einer Spalte sind die linke und rechte Kante die Linie, also stimmen die Breiten stattdessen überein. Ein Gitter hat beide Kanten zu halten, also muss es beide übereinstimmen, und das ist der Modus, in dem etwas geben muss.
Das ist das ganze Design. Alles unten ist das, was daraus folgt.
Was macht nebeneinander mit einem großen Screenshot?
Es vergrößert es, manchmal mehr als Sie wollen.
Hier ist das Messergebnis für das obige Paar, das aus dem Layout-Code entnommen wurde, anstatt geschätzt zu werden:
| Mode | Leinwand | Foto gezeichnet an | Screenshot gezeichnet bei |
|---|---|---|---|
| nebeneinander | 5429 x 3024 | 4032 x 3024 | 1397 x 3024 |
| gestapelt | 4032 x 11750 | 4032 x 3024 | 4032 x 8726 |
Seite an Seite lag beides auf 3024, das höhere der beiden Höhen, so dass der Screenshot von 2532 auf 3024 Pixel hoch ging. Das ist eine 19%-ige Vergrößerung, die auf einem Screenshot von Text sichtbar ist, wenn Sie danach suchen und unsichtbar, wenn Sie dies nicht tun.
Stapeln ist das dramatische. Die Anpassung an das breitere Bild dauerte den Screenshot von 1170 bis 4032 Pixel, was einem Faktor von 3,4 entspricht, und die Leinwand wurde 11.750 Pixel groß. Der Screenshot ist jetzt das dominierende Objekt in einem sehr langen Bild, und jeder Buchstabe darin wurde um mehr als drei Mal skaliert, was kein Resampling-Mensch scharf macht.
Die Lektion ist nicht, dass ein Modus besser ist. Es ist so, dass der Modus entscheidet, welches Bild vergrößert wird. Wählen Sie also dasjenige aus, dessen übereinstimmende Achse Ihre Bilder bereits einverstanden sind. Zwei Telefonfotos in Landschaft teilen sich eine Höhe und gehen nebeneinander, ohne dass sie skaliert werden. Zwei Screenshots vom selben Telefon teilen sich eine Breite und stapeln perfekt.
Wann sollten Sie stapeln, anstatt nebeneinander zu gehen?
Wenn der Inhalt nach unten liest oder wenn die Bilder bereits die gleiche Breite haben.
Stapeln ist für eine Sequenz richtig: drei Screenshots eines Checkout-Flows, ein Vorher und Nachher, wo das Nach unten hingehört, eine Unterhaltung, die in Teilen erfasst wird. Es ist auch richtig, wenn die Eingaben vom selben Gerät in derselben Ausrichtung kamen, da dann die Breiten bereits übereinstimmen und nichts skaliert wird.
Side by Side ist zum Vergleich richtig, wenn sich das Auge eher quer bewegen sollte als nach unten, und für alles, was in einem Beitrag inline angezeigt wird, da ein Bild von 4032 mal 11.750 gescrollt und nicht gesehen wird.
Es gibt einen praktischen Grund, die Reihe auch zu bevorzugen. Die meisten Orte, die ein Bild akzeptieren, zeigen es in einer festen Breite an, sodass eine sehr hohe Zusammenführung zu einem Band schrumpft. Eine Reihe von drei Fotos auf derselben Höhe bleibt in dieser Breite so lesbar, dass eine Spalte von drei niemals lesbar ist.
Was muss ein Gitter entscheiden, dass ein Streifen nicht funktioniert?
Was tun mit einem Bild, das nicht die Zellform ist, was eine Frage ist, die ein Streifen niemals stellen muss, weil er nur eine Achse anheftet.
Ein Gitterstifte beides. Jede Zelle hat die gleiche Größe, und ein 4: 3-Foto passt nicht zu einer Zelle in Form eines 9: 19,5-Screenshots. Es gibt nur zwei ehrliche Antworten, und das Tool fordert Sie auf, zwischen ihnen zu wählen:
- enthalten Passt das ganze Bild in die Zelle und lässt Platz um sie herum. Nichts geht verloren und das Gitter sieht leicht zerlumpt aus, da jedes Bild in seinem eigenen Hintergrundfeld sitzt.
- Cover Füllt die Zelle vollständig aus, indem sie eine zentrierte Zuschneide aus dem Bild nimmt. Das Gitter sieht gleichmäßig aus und die Ränder der Bilder sind verschwunden.
Im Allgemeinen ist keiner richtig. DIN ENTFERNEN ist richtig für Screenshots, Dokumente, Diagramme und alles, wo eine Kante Informationen enthält. Cover ist richtig für Gesichter, Landschaft und Textur, wo eine Person ohnehin das ist, was eine Person getan hätte.
Der Standard ist hier Cover, da der häufigste Grund für das Erstellen eines Rasters darin besteht, dass es als ein Objekt gelesen werden sollte.
Wie viel von einem Bild wirft Cover weg?
Mehr als die Leute erwarten, wenn die Eingaben unterschiedliche Formen haben, und überhaupt nichts, wenn sie übereinstimmen.
Die Zellengröße ist der Durchschnitt der Eingaben, sodass zwei sehr unterschiedliche Bilder eine Zelle erzeugen, die zu beiden passt. Für das Foto- und Screenshot-Paar wird in einem Zwei-Zellen-Raster genau das Layout-Code angegeben, was gezeichnet wird:
| Bild | Eingeboren | Quellbereich gezeichnet | Pixel behalten |
|---|---|---|---|
| Foto | 4032 x 3024 | 2831 x 3024 | 70,2% |
| Screenshot | 1170 x 2532 | 1170 x 1250 | 49,4% |
Der halbe Screenshot ist weg. Nicht komprimiert, nicht skaliert: weggeschnitten, oben und unten, weil ein hohes, schmales Bild, das in eine fast quadratische Zelle gezwungen wird, seine Enden verlieren muss. Wenn dieser Screenshot eine Quittung war, ist die Gesamtsumme nicht mehr im Bild.
Der gleiche Betrieb auf zwölf Fotos von derselben Kamera schneidet nichts, denn jeder Eingang hat bereits die Form der Zelle. Die Abdeckung ist billig, wenn die Eingaben übereinstimmen, und teuer, wenn sie nicht sind, und das Tool kann nicht sagen, in welchem Fall Sie sich befinden. Wechseln Sie, um den Moment zu enthalten, in dem Ihre Bilder unterschiedliche Formen haben und die Kanten wichtig sind.
Wie viele Spalten sollte ein Gitter haben?
Genug, dass das Ergebnis breiter als groß ist, was für die meisten Zählungen die abgerundete Quadratwurzel bedeutet.
Die Zeilen folgen aus den Spalten und der Zählung, und die Arithmetik ist unversöhnlich. Zwölf Bilder in vier Spalten sind drei volle Zeilen. Sieben Bilder in drei Spalten sind drei Zeilen mit zwei leeren Zellen am Ende, die das Layout als Hintergrund hinterlässt, anstatt das letzte Bild zu füllen, um sie zu füllen.
| Bilder | Kolonne | Ergebnis |
|---|---|---|
| 4 | 2 | 2 x 2, keine Lücken |
| 6 | 3 | 2 x 3, keine Lücken |
| 7 | 3 | 3 Reihen, zwei Zellen leer |
| 9 | 3 | 3 x 3, keine Lücken |
| 12 | 4 | 3 x 4, keine Lücken |
Eine Zählung, die sauber zielt, lohnt sich. Wenn Sie sieben Fotos haben und die leere Ecke Sie stört, sind die ehrlichen Korrekturen, eines zu löschen, hinzuzufügen oder es zu akzeptieren, da keine Anordnung von sieben gleichen Zellen ein Rechteck ist.
Warum gibt es eine Lückeneinstellung und was soll es sein?
Weil das Berühren von Bildern als ein Bild gelesen wird, und manchmal ist das falsch.
Eine Lücke von Null ist richtig für ein Panorama, für ein vorher und nachher sollte es wie ein Rahmen aussehen und für alles, wo die Naht der Punkt ist. Aus diesem Grund ist es hier die Standardeinstellung.
Eine Lücke ist richtig, wenn die Bilder getrennt sind, die sich in einer Datei befinden: drei Produktaufnahmen, eine Reihe von Screenshots, eine Collage. Irgendwo zwischen 8 und 24 Pixeln funktioniert die Arbeit bei Bildern von ein paar tausend Pixeln, und der Schieberegler geht für größere Arbeit auf 80. Der Spalt wird sowohl außen als auch dazwischen angelegt, sodass das Ergebnis eher einen Rand als Bilder hat, die vom Rand abbluten.
Eine Sache, die Sie wissen sollten, bevor Sie PNG für eine Lücke in der Lücke auswählen: Die Lücke ist mit Weiß gefüllt, nicht transparent. Die Leinwand wird weiß gestrichen, bevor etwas gezeichnet wird, da JPEG keinen Alphakanal hat und eine unbemalte Lücke als Schwarz exportiert. Ein PNG von diesem Werkzeug hat daher eher weiße als transparente, was wichtig ist, wenn Sie das Ergebnis auf einem farbigen Hintergrund verlegen wollten.
Wie groß wird das zusammengeführte Bild?
Größer als die Eingaben und im gestapelten Gehäuse viel größer, weil nichts weggedrückt wird.
Die Canvas-Dimensionen sind aus dem Modus vorhersehbar. Nebeneinander ist die Breite die Summe der skalierten Breiten und die Höhe die höchste Eingabe. gestapelt ist die Breite die breiteste Eingabe und die Höhe die Summe. Ein Gitter ist Spalten mal die Zelle plus die Lücken.
Zwölf Telefonfotos in einem Vierspaltenraster sind 16.208 mal 9.136 Pixel, was 148 Megapixel entspricht. Hier beginnt der nächste Abschnitt.
Warum stoppt die Ausgabe bei 8.000 Pixel?
Weil ein Browser-Canvas über eine bestimmte Größe hinaus funktioniert, und es nicht sagt.
Die Grenze ist keine Spezifikation. mdn sagt es deutlich: Die meisten Browser überschreiten 10.000 mal 10.000 Pixel, iOS-Geräte wurden in der Vergangenheit auf 4.096 um 4.096 beschränkt und überschreiten die maximalen Abmessungen oder den Bereich "Darstellung der Leinwand unbrauchbar" mit stillschweigendem Zeichen. Es gibt keine Ausnahme zu fangen. Sie erhalten ein leeres Bild oder gar nichts. Per-Browser-Figuren werden in der Testergebnisse in Canvas-Größe, die die Referenz ist, die es wert ist, überprüft zu werden, bevor eine Nummer angenommen wird.
Das Layout wird also so skaliert, dass es auf eine lange Seite von 8.000 Pixel passt, anstatt dass es ausfallen darf. Für dieses zwölf Fotoraster beträgt der Skalierungsfaktor 0,494, was 16.208 mal 9.136 auf 8.000 mal 4.509 entspricht, was 36 Megapixel entspricht. Jedes Foto landet bei rund 1.976 mal 1.483 statt 4.032 mal 3.024.
Das ist ein echter Verlust an Auflösung, und es ist der ehrliche Handel: Ein 36-Megapixel-Bild, das existiert, schlägt ein 148-Megapixel-Bild, das der Browser nicht zeichnen möchte. Wenn Sie die volle Auflösung von zwölf Fotos benötigen, fügen Sie sie in weniger, größeren Stücken zusammen oder verwenden Sie ein Desktop-Tool ohne Leinwand im Weg.
Sollte das Ergebnis PNG oder JPG sein?
jpg für Fotos, PNG für Screenshots und alles mit Text oder flacher Farbe.
Dies ist die gewöhnliche Regel und das Zusammenführen ändert nichts an ihr, aber das Zusammenführen macht es wichtiger, weil die Ausgabe groß ist. Eine 5429 von 3024 Zusammenführung von zwei Fotos ist eine Datei, die Sie bei PNG-Größen bemerken werden und nicht bei JPEG-Qualität 0,92, was exportiert wird.
Die Rückseite gilt für Screenshots. JPEGs Chroma-Unterabtastung und Blocktransformation erzeugen sichtbare Streifen an scharfen Textkanten, und ein zusammengeführter Streifen von Screenshots besteht hauptsächlich aus scharfen Textkanten. PNG ist verlustfrei, daher bleibt der Text genauso scharf wie er war.
Eine gemischte Zusammenführung hat keine richtige Antwort. Wenn eine Ihrer Eingaben ein Screenshot mit Text und eine andere ist, wählen Sie aus, nach welchem ein Leser sich anschaut.
Verliert die Zusammenführung an Qualität?
Die Zeichnung tut es nicht, aber die Skalierung könnte, und es ist wert zu wissen, welches was ist.
Pixel, die in ihrer nativen Größe gezeichnet werden, werden kopiert, nicht neu komprimiert. Bei einer Seite an Seite zusammenführen von zwei Landschaftsfotos von derselben Kamera wird überhaupt nichts skaliert, so dass jedes Pixel in der Ausgabe von einem Eingabepixel stammt.
Die Skalierung ist wo die Qualität hingeht. Jedes Bild, das einem größeren Nachbarn entspricht, wird neu abgetastet, was Pixel erfindet, die nie fotografiert wurden. Ein Screenshot, der 3,4-mal so vergrößert wurde, dass er ein Foto hat, ist weich, um keine Einstellung zu erhalten. Nichts wird über den größten Eingang der Achse hinaus hochskaliert, also gibt es eine Decke, aber ein kleines Bild neben einem großen wird immer noch gestreckt, um es zu erreichen.
Dann gibt es den Export. Die Auswahl von JPG codiert alles neu, einschließlich der Eingaben, die bereits JPEGs waren. Dies ist eine zweite Generation der verlustbehafteten Komprimierung für diese. Es ist der gleiche Mechanismus in beschrieben Der Audioguide zum Extrahieren eines Titels, in einem anderen Medium: Etwas verlustbehaftetes zu entschlüsseln und es wieder zu komprimieren ist nie kostenlos. Bei Qualität 0,92 sind die Kosten gering, und für einen zusammengeführten Fotostreifen ist es sowieso der richtige Anruf.
In welcher Reihenfolge gehen die Bilder?
Die Reihenfolge, die Sie hinzugefügt haben, von links nach rechts oder von oben nach unten, und die einzige Möglichkeit, sie zu ändern, besteht darin, eine zu entfernen und erneut hinzuzufügen.
Dies ist zu beachten, bevor Sie zwölf Dateien gleichzeitig auswählen, da ein Dateiauswahl sie in eigener Reihenfolge übergibt, die normalerweise alphabetisch nach Dateiname und gelegentlich nicht erfolgt. Für eine Sequenz, die wichtig ist, wie ein Checkout-Flow, ist das Hinzufügen von ihnen in der gewünschten Reihenfolge weniger Arbeit als das Nachbessern.
Dreißig Bilder sind die Decke. Das ist keine Leinwandgrenze, es ist eine Sanity-Grenze: Eine Zusammenführung von dreißig Telefonfotos ist ein 30-Megapixel-Gitter nach der Kappe und ein Layout, das niemand lesen kann.
Was gibt Ihnen ein zusammengeführtes Bild nicht?
Alles, was ein Designwerkzeug tut, was die ehrliche Grenze eines Zusammenführungswerkzeugs ist.
Es gibt keine Grenzen um einzelne Bilder, keine abgerundeten Ecken, keine Schlagschatten, keine Bildunterschriften, keine Drehung pro Bild, keine Überlappung, keine andere Hintergrundfarbe als Weiß. Jedes Bild wird in sein Rechteck gezeichnet und das ist der gesamte Feature-Set.
Wenn Sie eine gerahmte Collage mit Text wünschen, ist dies ein Designjob und ein Design-Tool. Wenn Sie drei Bilder in eine Datei einfügen möchten, damit etwas, das ein Bild akzeptiert, alle drei erhalten, dann ist das dies. Die zweite als schwache Version der ersten zu behandeln ist die übliche Quelle der Enttäuschung.
Zwei benachbarte Werkzeuge decken die gemeinsamen Follow-ups ab: Hinzufügen von Text zu einem Bild für eine Beschriftung und Der Bildkompressor Wenn ein zusammengeführtes Fotoraster größer als ein Upload-Limit zulässig ist.
Warum läuft das im Browser?
Weil die Bilder niemals irgendwohin gehen müssen und im Moment, in dem sie es tun, ist es die Entscheidung eines anderen, was mit ihnen passiert.
Die gesamte Zusammenführung ist eine Leinwandoperation. Ihre Dateien werden in den Seitenspeicher dekodiert, auf der Registerkarte auf eine Leinwand gezeichnet und die Leinwand als Download durch toBlobdrohen Keine Anfrage trägt ein Bild, es wird nichts auf einen Server geschrieben und es gibt keine gespeicherte Kopie, die jemand auslaufen oder vergessen kann.
Für viele Zusammenführungen ist das eine Feinheit. Für diejenigen, die einen Screenshot eines Kontoauszugs, ein Foto eines Dokuments, einen medizinischen Scan oder ein Bild eines Kindes beinhalten, ist es der ganze Grund, ein solches Werkzeug anstelle des ersten Ergebnisses zu verwenden, das Sie zum Hochladen auffordert.
Die Kosten sind die oben beschriebene Leinwandobergrenze und die Tatsache, dass sehr große Zusammenführungen durch den Speicherplatz begrenzt sind. Für zwei oder zwölf Bilder ist keine Grenze, die Sie erfüllen werden.
