Innerhalb einem Bild ein Teil austauschen

[internet]

Hallo,

ich möchte gerne innerhalb eines Bildes einen gewissen Bereich mit einem anderen Bild, Text etc. austauschen.

Ich habe ein Bild (komplett blauer Kasten). Nun möchte ich den schwarzen Teil ersetzen, sodass bspw. ein anderes Bild hier herein kommt.
Innerhalb einer XML - Datei würde ich die Infos zu diesem schwarzen Kasten speichern, also:
Top, Left, Width, Height.


Nun zwei Fragen:
1) Wie kann ich das machen?
2) Mein Content wird vermutlich auch HTML sein. Wie kann ich den HTML Code in das Bild hereinbekommen?

 

[timjoseph]

class Canvas extends JPanel{
    public Canvas(){
        this.setLayout(null);
        this.setBackground(Color.WHITE);
    }
    
    protected void paintComponent(Graphics g){
        super.paintComponent(g);
        int x = 10;
        int y = 10;
        int width = 100;
        int height = 50
            
        // Zeichne ein blaues Rechteck
        g.setColor(Color. BLUE);
        g.fillRect(x, y, width, height);
        
        // Zeichnen Sie Ihren HTML-Inhalt
        g.drawText("HTML",x,y);
    }
}

 

[internet]

Danke... Der blaue Kasten wird angezeigt.
Aber

 g.drawText("HTML",x,y);

scheint nicht zu gehen, die Methode gibt es nicht...
Ist es vllt.

 g.drawString("HTML",x,y);

?

Das habe ich probiert, aber das wird nicht angezeigt

 

[mihe7]

Du musst die Farbe vorher setzen

Außerdem frage ich mich, ob Du das Bild anzeigen willst oder nur in einem Bild (Bilddatei) etwas ersetzen möchtest.

 

[internet]

Hm, die ist doch gesetzt?
g.setColor(Color. BLUE);

 

[KonradN]

Hm, die ist doch gesetzt?
g.setColor(Color. BLUE);

Blaue Schrift auf blauem Hintergrund?

 

[mihe7]

Hm, die ist doch gesetzt?
g.setColor(Color. BLUE);

Ja und blauer Text auf blauem Hintergrund macht sich gut

 

[internet]

Hm ist das dann setFontColor ?

 

[KonradN]

Hm ist das dann setFontColor ?

Hast Du Dir denn die Klasse einmal angesehen? Dazu gibt es ja eine Dokumentation. Hat denn Graphics eine Methode setFontColor? Was sagt denn die Beschreibung von drawString bezüglich der Funktionalität?

Im Augenblick siehst Du mich etwas irritiert, denn Du hast ja auch schon drawText angeführt, dass es nicht gibt. Wie schreibst Du denn den Code? Verwendest Du eine IDE? Welche? Denn sowas zeigt ja auch die IDE mit an wenn man Code schreibt.

 

[internet]

Ne, setFontColor gibt es wohl nicht.
DrawText kam nicht von mir 😬

Mir ist nicht klar wie ich die Schriftfarbe ändern sollte.
SetColor scheint ja der Hintergrund zu sein.

Des Weiteren kann der HTML Code ja selbst den Code enthalten, wie die Schrift aussehen soll, wie wird denn das betrachtet, sodass der html Code entsprechend umgewandelt wird in Ausgabe Code des Html Codes? Im Moment wird ja dann nur ein Text ‚HTML‘ reingeschrieben, aber ich möchte wie gesagt den Html Code umgewandelt haben wie:
<Span Style……

 

[KonradN]

DrawText kam nicht von mir 😬

Oh ja, stimmt natürlich. Entschuldige.

Mir ist nicht klar wie ich die Schriftfarbe ändern sollte.
SetColor scheint ja der Hintergrund zu sein.

Nein, es setColor setzt die Farbe, die für die weiteren Funktionen verwendet wird. Das ist wie die Farbe des Stiftes. fillRect malt dann ein ausgemaltes Rechteck - es wird also ein Stift genommen und damit dann ein Rechteck ausgemalt.
Eine Hintergrundfarbe gibt es da eigentlich nicht bei Graphics. Hintergrund ist halt das, was schon da ist und darauf wird gemalt. Aber du kannst natürlich auch mit weißer Farbe ein bemaltes Blatt wieder weiss machen

(Das Setzen des Hintergrundes war beim Canvas - nicht beim Graphics Objekt, mit dem Du malst!)

Und nein - HTML kannst Du so nicht rendern. Dazu brauchst Du eine Render Engine. Wenn Du HTML Darstellen willst, dann solltest Du ein entsprechendes Control verwenden. Swing bietet da aber nichts vernünftiges. JavaFX kommt mit einem solchen Control. Man kann aber auch z.B. https://github.com/shannah/webviewjar anschauen. (Auch wenn es etwas älter ist)

 

[internet]

Hm warum JavFx bzw. Swing?

Vielleicht ist auch nicht so klar was ich machen will:

Also was ich genau machen will:

• Bild einlesen
• Informationen von einer XML auslesen, die Infos zu Koordinaten angibt, was beim Bild wo ausgetauscht wird. Also bspw. ein Rechteck in blau Hi hinzufügen.
• neues Bild erzeugen mit den Zusatzinfos (zB blaues Rechteck
• Bild speichern

 

[KonradN]

Hm warum JavFx bzw. Swing?

Das war, was mich und auch @mihe7 schon die ganze Zeit bewegt hat:

Außerdem frage ich mich, ob Du das Bild anzeigen willst oder nur in einem Bild (Bilddatei) etwas ersetzen möchtest.

Dann ist das, was Du bisher gemacht hast mit einem Canvas so erst einmal irrelevant. Wobei Du bei einem Bild auch ein Graphics Objekt erstellen kannst, so dass sowas auch weiterhin möglich ist.

Und auch das Problem bleibt dann so erst einmal unverändert. Das HTML muss gerendert werden. Was da evtl. ausreichen kann:

Java Graphics How to - Render HTML and save to Image

Java Graphics How to - Render HTML and save to Image

www.java2s.com

Das ist aber dann relativ limitiert bezüglich der Möglichkeiten. Also kein JavaScript und so ... Aber wenn es nur reines HTML ist, dann könnte das schon ausreichend sein.

 

[mihe7]

Eine Überlegung wäre auch, das per JavaScript im Browser zu lösen.

 

[internet]

Eine Überlegung wäre auch, das per JavaScript im Browser zu lösen.

Also ich brauche kein Java Script aus dem HTML Code zu rendern.. das einzige wäre ein QR Code, aber ich glaube da gibt es speziell dann andere Varianten…
Schaue ich mir morgen im Detail an…

 

[mihe7]

Also ich brauche kein Java Script aus dem HTML Code zu rendern..

Dann sollte es auch so funktionieren.

 

[internet]

Ok, funktioniert prinzipiell mal...

Aber:

• Wo gebe ich denn die Koordinaten für das Rechteck an, wo der HTML Content rein soll? Aktuell erscheint der HTML Code nur links oben
• Aktuell erscheint mir ein weißer Hintergrund dafür... Das ganze soll über den HTML Code funktionieren. Also background=red soll es dann nehmen....
• Ebenfalls soll die Methode paintComponent mehrmals aufgerufen werden, da ich bspw. in meinem TemplateEditor definiere, dass an unterschiedlichen Positionen etwas geändert werden soll... Außer dass ich die Methode in einer Schleife aufrufe, was muss ich noch machen?

Aktueller Code:

    /**
     * Erstellen
     *
     */
    public static void generateNewPicture(FileWatcherSetting fileWatcherSetting,
            ActionGenerateNewPicture actionGenerateNewPicture, WatchKey watchKey, WatchEvent<Path> watchEvent)
            throws IOException {

        LOGGER.info("START generateNewPicture");

        // Pfad vom Bild erhalten
        Path dir = (Path) watchKey.watchable();
        Path fullPath = dir.resolve(watchEvent.context());

        File fileOriginal = new File(fullPath.toString());

        ByteArrayInputStream in = createNewPicture(fileOriginal);

        String newFilePath = actionGenerateNewPicture.getFilePath() + File.separator + fileOriginal.getName();
        File newFile = new File(newFilePath);
        FileUtils.copyInputStreamToFile(in, newFile);

        LOGGER.info("END generateNewPicture");
    }

    /**
     * Erstellt ein neues Bild
     *
     * @param fileOriginal
     * @return
     * @throws IOException
     */
    private static ByteArrayInputStream createNewPicture(File fileOriginal) throws IOException {

        // Sample Picture laden
        BufferedImage originalImage = ImageIO.read(fileOriginal);
        
        ByteArrayOutputStream outputStream = new ByteArrayOutputStream();
        
        // Bild bearbeiten
        outputStream = paintComponent(originalImage, originalImage.getGraphics());

        return new ByteArrayInputStream(outputStream.toByteArray());
    }
    
    
    protected static ByteArrayOutputStream paintComponent(BufferedImage image, Graphics g) throws IOException{

        int width = 500;
        int height = 500;
            
        String html = "<h1>Hello, world.</h1>";


        Graphics graphics = image.createGraphics();

        JEditorPane jep = new JEditorPane("text/html", html);
        jep.setSize(width, height);
        jep.print(graphics);
        
     // get the byte array of the image (as jpeg)
        ByteArrayOutputStream baos = new ByteArrayOutputStream();
        ImageIO.write(image, "jpg", baos);
        
        return baos;
    }

 

[KonradN]

Bei sowas wäre mein genereller Ratschlag: Schau Dir die Klassen, die Du bisher verwendest, doch einmal im Detail an! Was für Methoden bietet denn z.B. BufferedImage? Oder Graphics?

Dann findet man viele interessante Methoden, die ggf. weiterhelfen. Und man lernt sehr viel über das Framework, das man verwendet. Und dann kann man viel mehr Ideen entwickeln, wie man etwas aufbauen kann.

Nicht, dass wir Dir nicht gerne Fragen beantworten, aber unser Ziel ist halt auch, Dich dahin zu bringen, dass Du so Dinge zukünftig alleine lösen kannst.

BufferedImage bietet z.B, getSubImage ..
Graphics bietet eine create Methode ...

Man kann sich da ja mal die Dokumentation durchlesen und überlegen: Könnte das etwas sein, das weiter hilft? Und dann ggf. einfach mal etwas herum probieren. (Selbst wenn es dann nicht geht, lernt man vielleicht etwas mehr über die Methoden, so dass man diese ggf. in Zukunft verwenden kann....)

 

[internet]

Ok, wenn ich noch nähere darüber nachdenke brauche ich eher einen anderen Ansatz - ich muss eig. ein komplett neues Bild zecihnen:

1) Generie mir ein leeres Bild
2) Fülle mir das Bild mit HTML Content
3) Lade mir bei definierten Bereichen das entsprechende Bild aus dem Verzeichnispfad und füge es bei einer entsprechenden Position ein
4) Falls noch "Overlays" definiert wurden, lade mir die Overlay - Dateiein (.png) aus dem Verzeichnispfad und füge diese dem Bild hinzu...

Also im Grunde soll es so aussehen:


Die ganze Struktur (Positionen der schwarzen Kasten), Hintergrundfarbe etc. steckt in einer XML, die ich mittels einem HTML Designer erstelle.

• Gelb sind die Overlays
• Schwarz sind <divs... Innerhalb den <divs soll dann das Bild aus dem Verzeichnispfad ersetzt werden...

ich brauche also sowas wie:

public void createImage(){

    // Erstelle mir ein Bild mit der Größe 1000x1000
    // Was für ein Objekt muss ich hier erstellen?
    
    // Angenommen es werden 12 Boxen erstellt
    for(int i=1;i<=12;i++){
        createBoxes()
    }
    
    // Angenommen es werden 12 Overlays erstellt
    for(int i=1;i<=12;i++){
        createOverlays()
    }

}

public void createBoxes(){

}

public void createOverlays(){

}

Welche Objekte benötige ich denn hierzu?
Wie male ich zunächst mal das Bild? Welche Klasse ist das?
Ausgehend davon muss ich bei diesem Objekt dann Dinge hinzufügen

 

[KonradN]

Bezüglich Bild: Mit was hast Du denn zuletzt gearbeitet um da ein Bild zu verändern? Hast Du Dir die Klasse mal angesehen? Wenn Du da eine neue Instanz haben willst, dann schaut man nach Konstruktoren oder Factory Methoden. Vielleicht wirst Du ja fündig.

Wie hast Du es bisher verändert? Was bieten diese Klassen denn so alles an Methoden?

In #18 habe ich ja zwei Klassen auch explizit erwähnt.

Generell führt kein Weg drumherum: Wenn Du mit irgendwelchen Dingen (professionell) arbeiten willst, dann musst Du die Möglichkeiten und Fähigkeiten dieser Dinge kennen und den Umgang damit üben. Dabei ist es vollkommen egal, was es ist. Ob Du nun als Bauarbeiter einen Bagger nutzen willst oder als Programmierer irgendwelche Klassen. Das geht alles nur, wenn man sein Werkzeug kennt und bedienen kann. (Sorry, wenn ich da jetzt eine Spaßbremse bin, aber das ist so meine Sicht auf diesen und andere aktuelle Threads.)

 

[internet]

Ok, Schritt für Schritt:

Also zunächst brauche ich ein BufferedImage?

BufferedImage image = new BufferedImage(1000, 1000, TYPE_INT_RGB);

Anschließend habe ich ein Objekt "Graphics":

Graphics graphics = image.createGraphics();

Dann füge ich etwas hinzu (das könnte ich dann in die Schleife packen):
- Wo setze ich aber die Position (x und y - Achse) ????

        JEditorPane jep = new JEditorPane("text/html", html);
        jep.setSize(200, 200);
        jep.print(graphics);

• Das Einlesen des Bilds und ersetzen fehlt noch
• Das mit dem Overlay fehlt noch...

Später erstelle ich dann eben das Bild wieder:

ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(image, "jpg", baos);

 

[mihe7]

- Wo setze ich aber die Position (x und y - Achse) ????

BufferedImage bietet z.B, getSubImage ..
Graphics bietet eine create Methode ...

Man kann sich da ja mal die Dokumentation durchlesen und überlegen: Könnte das etwas sein, das weiter hilft?

 

[internet]

ok, ich habe mir die Doku näher angesehen und habe nun auch folgendes erstellt:

    public static void main(String[] args) throws IOException {
 
        int width = 500;
        int height = 500;
 
        // Create BufferedImage
        BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        
        // Create a graphics which can be used to draw into the buffered image
        Graphics2D g2d = bufferedImage.createGraphics();
 
        String html = "<h1>Hello, world.</h1>";
        
        // Background
        g2d.setColor(Color.white);
        g2d.fillRect(0, 0, width, height);
 
        // Create String
        g2d.setColor(Color.blue);
        g2d.fillRect(300, 400, 50, 100);
 
        // create a string with yellow
        g2d.setColor(Color.green);
        g2d.fillRect(50, 50, 50, 100);
        
        JEditorPane jep = new JEditorPane("text/html", html);
        jep.setSize(400, 100);
        jep.setLocation(200, 300);
        jep.print(g2d);
 
        // Disposes of this graphics context and releases any system resources that it is using.
        g2d.dispose();
 
        // Save as PNG
        File file = new File("myimage.png");
        ImageIO.write(bufferedImage, "png", file);
 
    }

Zurück bekomme ich das:


Ich definiere aber die Location von JEditorPane so:
jep.setLocation(200, 300);

Wie man aber erkennt, ist der HTML Content ganz oben.
Was mache ich falsch?

 

[KonradN]

Was mache ich falsch?

Dir fehlt das Verständnis was Dein Code macht macht.

Was ist denn das JEditorPane? Was setzt Du mit der Location? Was macht denn das print der Komponente?
Recherchier das doch einmal damit Du verstehst, was dein derzeitiger Code macht.

Und mit welcher Methode es gehen könnte, habe ich Dir schon genannt und @mihe7 hat es schon einmal zitiert:

BufferedImage bietet z.B, getSubImage ..
Graphics bietet eine create Methode ...

Mit den Methoden sollte es gehen. Dabei kannst Du Dir aussuchen, welche von beiden Du gerne nutzen möchtest.

 

[internet]

Mit den Methoden sollte es gehen. Dabei kannst Du Dir aussuchen, welche von beiden Du gerne nutzen möchtest.

aha - also brauche ich nur eines der Methoden nutzen?
getSubImage ist mir überhaupt nicht klar... set würde schon eher Sinn machen...
Ich will nicht ein Teilbild herausschneiden... Ich will eine neue schwarze Box erstellen inkl. dem HTML Content...
Sprich ich möchte dem BufferedImage ein neues Element hinzufügen...

create Graphics... ok, ein neues Graphics2D erstellen, aber wo wieder hinzufügen?

 

[internet]

        JEditorPane jep = new JEditorPane();
        jep.setContentType("text/html");
        jep.setText(html);
        JPanel container = new JPanel();
        SwingUtilities.paintComponent(g2d, jep, container, 150, 100, 200, 200);

 

[KonradN]

Also dann arbeiten wir einmal alles auf ...

Als erstes Dein Versuch mit dem Control:

• setLocation eines Controls setzt die Lokation des Controls im übergeordneten Control. Das ist also nichts, was das Control selbst interessiert. Benutzt wird dies also von dem übergeordneten Control, dass dann beim Malen dem Control ein Graphics Objekt erzeugt, mit dem das Child Control sich selbst malen kann.
• print - ist wie paint. Es wird eine Graphics Instanz übergeben und in die Malt es sich sich selbst ... einfach ab Punkt 0,0

Daher ist klar, dass das rauskommt, was halt raus kommt. Ich habe jetzt bei den Dingen keine Dokumentation zitiert um es einfach zu halten.

Kommen wir zu BufferedImage.getSubImage:

BufferedImage (Java SE 17 & JDK 17)

declaration: module: java.desktop, package: java.awt.image, class: BufferedImage

docs.oracle.com

Returns a subimage defined by a specified rectangular region. The returned BufferedImage shares the same data array as the original image.

Du bekommst also ein neues BufferedImage, das einen Ausschnitt des original Bildes beinhaltet und das die zugrunde liegenden Daten teilt. Also eine Veränderung an dem einen Bild wird sich auch auf das andere auswirken.

Somit wäre denkbar gewesen, dass Du den Teil des Bildes, bei dem das HTML erscheinen soll, erst per getSubImage in ein eigenes BufferedImage packst um da dann ein Graphics Objekt zu erzeugen und dieses dem Control im print zu geben.

Kommen wir zu Graphics.create:

Graphics (Java SE 17 & JDK 17)

declaration: module: java.desktop, package: java.awt, class: Graphics

docs.oracle.com

Creates a new Graphics object based on this Graphics object, but with a new translation and clip area. The new Graphics object has its origin translated to the specified point (x, y). Its clip area is determined by the intersection of the original clip area with the specified rectangle. The arguments are all interpreted in the coordinate system of the original Graphics object. The new graphics context is identical to the original, except in two respects:

• The new graphics context is translated by (x, y). That is to say, the point (0, 0) in the new graphics context is the same as (x, y) in the original graphics context.
• The new graphics context has an additional clipping rectangle, in addition to whatever (translated) clipping rectangle it inherited from the original graphics context. The origin of the new clipping rectangle is at (0, 0), and its size is specified by the width and height arguments.

Das klingt doch auch ganz gut. Du hast also ein Graphics Objekt. Da nur ein Teilbereich verändert werden soll, erzeugst Du für diesen Teil ein neues Graphics Objekt um as dann für die print Methode zu nutzen.

Das ist übrigens auch genau das, was z.B. JComponent macht. (Noch mit etwas mehr drumherum). So wird für jedes Child Control geprüft, ob dieses mit Position und Größe innerhalb der zu malenden Fläche ist und wenn dies der Fall ist, dann wird das Graphics Objekt erzeugt und das paint des Child Controls aufgerufen.

Das ist also genau das, was ich Dir auch anraten würde.