“This is the 14th day of my participation in the November Gwen Challenge. See details of the event: The Last Gwen Challenge 2021”.

In front of the introduction of a Java image grayscale processing of the small demo, next to introduce an interesting thing, a picture into a character picture

With the knowledge of image gray processing, if we want to turn a picture into a character picture, we can also traverse every pixel, and then replace the pixel with a specific character, so as to achieve character processing

Based on this idea, the specific implementation is very clear

@Test
public void testRender(a) throws IOException {
    String file = "http://i0.download.fd.52shubiao.com/t_960x600/g1/M00/10/17/oYYBAFWvR5-IeXHuAAd5kPb8eSgAACm0QF50xIAB3mo414.jpg";
    // Download images from the network
    BufferedImage img = ImageIO.read(FileReadUtil.getStreamByFileName(file));


    int w = img.getWidth(), h = img.getHeight();
    // Create a new character picture artboard
    BufferedImage gray = new BufferedImage(w, h, img.getType());
    Graphics2D g2d = gray.createGraphics();
    g2d.setColor(null);
    g2d.fillRect(0.0, w, h);

    Font font = new Font("宋体", Font.BOLD, 1);
    g2d.setFont(font);
    for (int x = 0; x < w; x ++) {
        for (int y = 0; y < h; y ++) {
			g2d.setColor(ColorUtil.int2color(img.getRGB(x, y)));
            g2d.drawString("Grey", x, y);
        }
    }
    g2d.dispose();
    System.out.printf("Render complete");
}
Copy the code

Note the above implementation, when the character will be removed, first extract the color of the source pixel, and then reset to G2D, int to color is also relatively simple, the implementation is as follows

public static Color int2color(int color) {
    int a = (0xff000000 & color) >>> 24;
    int r = (0x00ff0000 & color) >> 16;
    int g = (0x0000ff00 & color) >> 8;
    int b = (0x000000ff & color);
    return new Color(r, g, b, a);
}
Copy the code

This has achieved a basic version of the character map, the actual run to see the effect

This is embarrassing. The output is not the expected character graph, so what’s the problem?

Take a closer look at the text size 1 above, which is so small that even the image with character components will look exactly the same to the naked eye

So let’s try making this text a little bigger, n by N pixels as a text rendering area, so we need to adjust the step size of the traversal; And the second thing is how do we color this area

  • You take the mean
/** * Take the average of multiple colors **@return* /
Color getAverage(BufferedImage image, int x, int y, int w, int h) {
    int red = 0;
    int green = 0;
    int blue = 0;

    int size = 0;
    for (int i = y; (i < h + y) && (i < image.getHeight()); i++) {
        for (int j = x; (j < w + x) && (j < image.getWidth()); j++) {
            int color = image.getRGB(j, i);
            red += ((color & 0xff0000) > >16);
            green += ((color & 0xff00) > >8);
            blue += (color & 0x0000ff);
            ++size;
        }
    }

    red = Math.round(red / (float) size);
    green = Math.round(green / (float) size);
    blue = Math.round(blue / (float) size);
    return new Color(red, green, blue);
}
Copy the code

The other thing is to change the step size of the traversal

@Test
public void testRender(a) throws IOException {
    String file = "http://i0.download.fd.52shubiao.com/t_960x600/g1/M00/10/17/oYYBAFWvR5-IeXHuAAd5kPb8eSgAACm0QF50xIAB3mo414.jpg";
    // Download images from the network
    BufferedImage img = ImageIO.read(FileReadUtil.getStreamByFileName(file));


    int w = img.getWidth(), h = img.getHeight();
    // Create a new grayscale image artboard
    BufferedImage gray = new BufferedImage(w, h, img.getType());
    Graphics2D g2d = gray.createGraphics();
    g2d.setColor(null);
    g2d.fillRect(0.0, w, h);

    int size = 12;
    Font font = new Font("宋体", Font.BOLD, size);
    g2d.setFont(font);
    for (int x = 0; x < w; x += size) {
        for (int y = 0; y < h; y += size) {
            Color avgColor = getAverage(img, x, y, size, size);
            g2d.setColor(avgColor);
            g2d.drawString("Grey", x, y);
        }
    }
    g2d.dispose();
    System.out.printf("Render complete");
}
Copy the code

After executing again, the result is as follows, achieving our desired effect

Finally, for a better posture, use the open source project github.com/liuyueyi/qu… To realize the picture character painting

After using image-plugins for this project, it is easy to generate a grayscale image

public void testCharImg(a) throws IOException {
    String img = "http://hbimg.b0.upaiyun.com/2b79e7e15883d8f8bbae0b1d1efd6cf2c0c1ed1b10753-cusHEA_fw236";
    BufferedImage out = ImgPixelWrapper.build().setSourceImg(img).setBlockSize(2)
            .setPixelType(PixelStyleEnum.CHAR_COLOR)
            .setChars("Little Grey Blog")
            .build()
            .asBufferedImg();
    System.out.println(out);
}
Copy the code

ImgPixelWrapper class that handles basic character processing, grayscale images, GIF images to character animations, pixelation of images (mosaics…)

Quick-media is even more interesting. If you want to generate cool QR codes on the Java side, you won’t be disappointed. Interested partners can take a look

A gray contact information

All letter is better than no book, the above content, purely one’s words, due to the limited personal ability, it is hard to avoid omissions and mistakes, such as finding bugs or better suggestions, welcome criticism and correction, not grudging gratitude

  • Personal site: blog.hhui.top
  • Micro Blog address: Small Gray Blog
  • QQ: a gray /3302797840
  • Wechat official account: One Grey Blog