Extracting Pixel Data From Fonts

[Mikpo Siru]

Hi,

Conceptually, how would I convert an arbitrary character into an array of pixel data, so that from that pixel data I would know what pixels need to be set in order to 'visually' get that character (e.g. drawing dots it in MS Paint)?

For example, this is an array of pixel data that could be generated for the Times New Roman character 'I':

(in pseudo-code)

//Pixel pattern for character 'I' of Times New Roman
byte[] pixelData = {
11111,
00100,
00100,
00100,
00100,
00100,
11111
};

In the array of pixel data, each row would be represented by a byte which would hold that bit pattern.

(Basically I want to be able to generate a pixel bitmap for all characters of an arbitrary font).

How doable is this? In general terms, how would it be done?

This is an application that is similar to what I am trying to do (scroll down to "Bitmaps and Fonts"):
http://www.reifel.org/PICUserInterface/

Thanks for any input.

Regards

MCU

[Ulf Dittmer]

You could draw the characters (in a font, size and style of your preference) into a BufferedImage, and then examine the pixel values of the raster of that image.

[Mikpo Siru]

Hi

Could you please give an example of creating a letter (e.g. 'I'), then assigning that to a BufferedImage? I am reading about Fonts and Images, and this will help me in research.

Thanks

MCU

[Ulf Dittmer]

Here's an example that does that: http://radio.javaranch.com/davo/2007/07/20/1184942077153.html I'm sure you can figure out how to remove the 90 degree rotation :-)

[Mikpo Siru]

Hi,

I've been trying to do this but haven't got far. I've looked at the above link, but I'm finding hard to decode. I need something simpler. If anyone could provide code (complete or psuedo) that does the below I would appreciate it (say for a test character, 'T').

[...]draw the characters (in a font, size and style of your preference) into a BufferedImage, and then examine the pixel values of the raster of that image.

Thanks!

MCU

[Ulf Dittmer]

That code is pretty basic. What do you not understand about it?

[Mikpo Siru]

Hi

I don't understna how to adapt it to my application. I have written the code below that draws a character 'H' in the very top left corner, then tries to capture that corner into a BufferedImage, then reads the pixel values row by row. When it reads the pixel values, it should output '0' for an rgb value of 0, and '1' for everything else:

import javax.swing.*;
import java.awt.*;
import java.awt.image.*;

public class Tester {

    public static void main(String[] args){
        TestGui gui = new TestGui();
        gui.go();
    }
}

class TestGui{

    public void go(){
        JFrame frame = new JFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        DrawingPanel myPanel = new DrawingPanel();
        
        frame.getContentPane().add(BorderLayout.CENTER, myPanel);

        frame.setSize(200, 200);
        frame.setVisible(true);

    }
}

class DrawingPanel extends JComponent{

    public void paintComponent(Graphics g){
        Graphics2D g2d = (Graphics2D) g;

        //Fill background white
        g2d.setColor(Color.WHITE);
        g2d.fillRect(0, 0, this.getWidth(), this.getHeight());

        //Set font
        Font font = new Font("sanserif", Font.PLAIN, 12);
        g2d.setFont(font);

        //Get font dimensions
        int width = g2d.getFontMetrics().stringWidth("H");
        int height = g2d.getFontMetrics().getMaxAscent();

        //Draw string in top left corner
        g2d.setColor(Color.black);
        g2d.drawString("H", 0, height);

        //Capture the top left corner character in BufferedImage
        BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
        bi = g2d.getDeviceConfiguration().createCompatibleImage(width, height);

        //Draw the pixel mapping using 1's and 0's in command line
        for(int j = 0; j < height; j++){    //Scroll through rows
            for(int i = 0; i < width; i++){ //Scroll through columns
               System.out.print(bi.getRGB(i,j)>0?"1":"0");  //If pixel rgb value is zero, output '0', 
                                                            //else '1'(want monochome image)
         }
            System.out.print("\n"); //next line
        }
    }
}

It's only printing 0's though...

Thanks MCU

[Rob Spoor]

That's because you create a new BufferedImage first, then throw that away, then create a new empty BufferedImage through g2d.getDeviceConfiguration(). You are indeed painting the H but not on the image.

Try out the following code:

import java.awt.*;
import java.awt.image.*;
import javax.swing.*;

public class Test
{
    public static void main(String[] args) throws Exception
    {
        Font font = new Font("sanserif", Font.PLAIN, 12);
        // use a JLabel to get a FontMetrics object
        FontMetrics metrics = new JLabel().getFontMetrics(font);
        int width = metrics.stringWidth("H");
        int height = metrics.getMaxAscent();
        // use ARGB or the background will be black as well
        BufferedImage bi = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
        // create a Graphics2D object from the BufferedImage
        Graphics2D g2d = bi.createGraphics();
        g2d.setFont(font);
        g2d.setColor(Color.black);
        g2d.drawString("H", 0, height);
        g2d.dispose();
        for(int j = 0; j < height; j++){    //Scroll through rows
            for(int i = 0; i < width; i++){ //Scroll through columns
                // check for != 0 as black is -(2^24) and that's negative
                System.out.print(bi.getRGB(i,j)!=0?"1":"0");  //If pixel rgb value is zero, output '0',
                                                             //else '1'(want monochome image)
            }
            System.out.print("\n"); //next line
        }
    }
}

[Ulf Dittmer]

As an aside, there's no font called "sanserif". See http://java.sun.com/javase/technologies/core/basic/intl/faq.jsp#font-selection for more information.

[Mikpo Siru]

Hi

Thanks both for your input! I now have a test program. I have some questions regarding imageType:

Based on the above program by Rob Prime:

1) If I fill or clear the area using g2d before writing a character to the BufferedImage, then the output is wrong (all 1's). But when I immediately write a character, without doing anything to the background (as in the example above), then the output is correct (1's and 0's). Why is this?

2)

line 24:
// check for != 0 as black is -(2^24) and that's negative  

Where can I find the mappings for colours of ARGB for Java?

3)The char's I draw to the BufferedImage are monochromatic, and the output is also monochromatic. Also, I am not displaying the BufferedImage or Graphics2D on a screen. I tried switching the BufferedImage imageType from TYPE_INT_ARGB to TYPE_BYTE_BINARY to try and use the 1-bit mode, but the output became incorrect. Where can I find out about using imageTypes, TYPE_BYTE_BINARY in particular?

Thanks again

Regards

MCU

[Ulf Dittmer]

The java.awt.image.BufferedImage javadocs have some information about the various image types, and how they store data. For the (A)RGB types, the int value generally has the A (alpha) value in bits 24-31, R (red) in bits 16-23, G (green) in bits 8-15 and B (blue) in bits 0-7. So you need to do some shifting and masking on the bit level to get at the individual color values.

The source code of the classes (which comes with the JDK in a file called "src.zip") may also help.