Bild richtig speichern / Hochkant im File Explorer, nach Upload vertikal

[internet]

Hallo,

auf meinem Mac - Laufwerk habe ich ein Bild, welches hochkant ist.
Das Bild möchte ich nun hochladen und verwende u.a. folgende Funktion (kleiner machen etc.)...
Das Problem scheint mir nun, dass hier das Bild nicht so betrachtet wird, wie es auf meinem Laufwerk ist.
Ggf. speichert es auf meinem Mac die EXIF Informationen so ab, sodass das Bild in meinem File Explorer entsprechend angezeigt wird.
Lade ich das Bild nun hoch, dann ist es nicht hochkant.
Kennt jemand das Problem?

    /**
     * InputStream ausgeben
     *
     * @throws IOException
     */
    public static BufferedImage convertByteArrayToBufferedImage(byte[] byteArray) throws IOException {

        InputStream is = new ByteArrayInputStream(byteArray);
        BufferedImage newBi = ImageIO.read(is);
       
        return newBi;
    }

public ByteArrayOutputStream resizePicture(byte[] inputStreamOriginal, int width, int height)
            throws IOException {
        BufferedImage bimg = StorageHelper.convertByteArrayToBufferedImage(inputStreamOriginal);

        int originalWidth = bimg.getWidth();
        int originalHeight = bimg.getHeight();

        // Nur verkleinern, wenn das Original Bild wirklich größer ist:
        if (originalWidth > width || originalHeight > height) {
            ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
            Thumbnails.of(bimg).size(width, height).outputFormat("jpg").toOutputStream(outputStream);
            return outputStream;
        }

    return null;
    }

Wie kann man das lösen?

 

[Robert Zenz]

Wie du bereits selbst festgestellt hast, ist ganz sicher die Sache die dass das Bild tatsaechlich in der Orientierung ist welche du am Server siehst. Der Dateimanager zeigt dir das Bild rotiert an basierend auf dem Metadaten des Bildes.

Da gibt es jetzt zwei Moeglichkeiten: Entweder du drehst das Bild am Client, oder du drehst es am Server.

Also entweder du rotierst das Bild auf deinem Computer so das es richtig ist (jhead ist ein moegliches Programm um dies in Masse zu machen)...oder du laedst das Bild hoch, liest dann davon die Metadaten aus (zum Beispiel mit metadata-extractor) und rotierst dann das Bild manuell basierend auf dieser Information.

 

[internet]

Ich würde es gerne am Server drehen - also so, wie es im File Explorer angezeigt ist...

Ich habe mir mal soeben die Größen der Datei angesehen:
- Auf dem File Explorer:
Breite: 3024px
Höhe: 4032px

Nachdem ich das BufferedImage bekommen habe, gerade andersherum:

int originalWidth = bimg.getWidth(); // 4032px
int originalHeight = bimg.getHeight(); //3024px

https://github.com/drewnoakes/metadata-extractor habe ich mir bereits angeschaut. Dass es die Lib gibt, sodass ich die EXIF Infos auslesen kann, weiß ich nun....

Aber mir ist dann nicht klar:
1. Wann muss ich das Bild drehen?
2. Wie drehe ich das Bild?

 

[Robert Zenz]

1. Wann muss ich das Bild drehen?

Weil das Bild mit 4032x3024 so ist, es ist horizontal, nicht vertikal. In dem Metadaten steht drinnen "hey, das Bild muss um 90° im Uhrzeigersinn gedreht angezeigt werden damit es stimmt". Wenn du jetzt das rohe bild betrachtest, interessieren dich die Metadaten nicht die Bohne. Das ist so wie wenn du ein Schild an deiner Tuer hast "Schuhe abwischen vor dem eintreten"...kannste machen, musste aber nicht.

2. Wie drehe ich das Bild?

Das einfachste wird sein wenn du dir ein zweites BufferedImage in der rotierten Groesze erzeugst, und dann ueber das Graphics Objekt einfach das andere Bild rotiert hinein zeichnest. Ich habe sowas aber schon seit Ewigkeiten nicht mehr gemacht oder gebraucht. Vielleicht will dir @KonradN da ein kompletteres, aktuelles Beispiel geben.

 

[KonradN]

Das malen geht ja einfach über ein Graphics Objekt, das man sich geben lässt und das bietet eine rotate Methode. Also dürfte es ganz einfach sein:

• zweites BufferedImage erzeugen (mit höhe <-> breite vertauscht)
• Graphics Instanz besorgen
• rotate aufrufen
• Bild malen

-> fertig

Ansonsten ist der offizielle Weg immer über eine Transformation - da geht dann halt deutlich mehr als drehen und so. Das wäre dann etwas wie:

    public static BufferedImage rotate90Clockwise(BufferedImage inputImage) {
        int width = inputImage.getWidth();
        int height = inputImage.getHeight();
        BufferedImage outputImage = new BufferedImage(height, width, inputImage.getType());
        Graphics2D g2d = outputImage.createGraphics();
        AffineTransform transform = new AffineTransform();
        transform.rotate(Math.PI / 2, height / 2, height / 2);
        g2d.setTransform(transform);
        g2d.drawImage(inputImage, 0, -width, null);
        g2d.dispose();
        return outputImage;
    }

(Da ich zu faul war, habe ich mir den Code von ChatGPT geben lassen.)

Und die erste Variante macht auch nichts anderes - siehe https://docs.oracle.com/en/java/jav...sktop/java/awt/Graphics2D.html#rotate(double)

Concatenates the current Graphics2D Transform with a rotation transform. Subsequent rendering is rotated by the specified radians relative to the previous origin. This is equivalent to calling transform(R), where R is an AffineTransform represented by the following matrix:

 

[internet]

danke...

Und die Prüfung, ob ich das Bild drehen muss oder nicht ist dann so?

public boolean isLandscape(BufferedImage image){
  return image.getWidth() > image.getHeight();
}

 

[internet]

@Robert Zenz / @KonradN

Also das ganze habe ich mir deutlich einfacher vorgestellt.
Das mit der obigen Prüfung wird so auch nicht funktionieren - ich brauche die EXIF des Bildes - alles andere hilft mir vermutlich nicht...
Ich habe nun mal dieses Framework verwendet.

    <dependency>
            <groupId>com.drewnoakes</groupId>
            <artifactId>metadata-extractor</artifactId>
            <version>2.18.0</version>
        </dependency>

Ich habe das nun so:

/**
     * BufferedImage ausgeben
     *
     * @throws IOException
     */
    public static BufferedImage convertByteArrayToBufferedImage(byte[] byteArray) throws IOException {

        LOGGER.info("START convertByteArrayToBufferedImage");

        InputStream is = new ByteArrayInputStream(byteArray);
        ImageInformation imageInformation = null;
        
        try {

            imageInformation = readImageInformation(is);

        } catch (Exception e) {
            LOGGER.error(ExceptionUtils.getFullStackTrace(e));
        }
        
        // Danach ist newBi NULL
        BufferedImage newBi = ImageIO.read(is);

        
        if (imageInformation != null) {

            if (imageInformation.orientation != 1) {
                AffineTransform transform = getExifTransformation(imageInformation);

                newBi = rotateImageInCorrectDirection(newBi, transform);
            }

        }

        LOGGER.info("END convertByteArrayToBufferedImage");
        return newBi;
    }

    /**
     * Ließt die Informationen bei einem Bild
     *
     * @param imageFile
     * @return
     * @throws IOException
     * @throws MetadataException
     * @throws ImageProcessingException
     */
    public static ImageInformation readImageInformation(InputStream imageFile)
            throws IOException, MetadataException, ImageProcessingException {

        Metadata metadata = ImageMetadataReader.readMetadata(imageFile);
        Directory directory = metadata.getFirstDirectoryOfType(ExifIFD0Directory.class);
        JpegDirectory jpegDirectory = metadata.getFirstDirectoryOfType(JpegDirectory.class);

        int orientation = 1;

        try {
            orientation = directory.getInt(ExifIFD0Directory.TAG_ORIENTATION);
        } catch (MetadataException me) {
            return null;
        }
        int width = jpegDirectory.getImageWidth();
        int height = jpegDirectory.getImageHeight();

        return new ImageInformation(orientation, width, height);
    }

Das Problem scheint mir diese Stelle zu sein:

Metadata metadata = ImageMetadataReader.readMetadata(imageFile);

In der API passiert das hier:


Wenn ich dann BufferedImage newBi = ImageIO.read(is); aufrufe, dann ist das BufferedImage NULL...

Wie kann ich das denn vernünftig lösen?

 

[thecain]

Ein Stream kann man, wie der Name sagt nur einmal lesen. Da du aber sowieso die Bytes zur Hand hadt, ist das ja kein Problem.

 

[internet]

Ein Stream kann man, wie der Name sagt nur einmal lesen. Da du aber sowieso die Bytes zur Hand hadt, ist das ja kein Problem.

hm ok - das heißt... was sollte ich ändern?

 

[Robert Zenz]

Du musst dir fuer jede leseoperation auf dem byte[] einen neuen ByteArrayInputStream anlegen.