Preface
Basic encoding is a standard BASE64 encoding, used to deal with conventional requirements: the output content does not add line breaks, and the output content consists of letters and numbers.
I recently made a web template, and I want to use Base64 background image. Although there are ready-made encoders on the network, I always want to implement one by myself. Many people may not know that the newly provided Base64 class in JDK 8 can handle this task very conveniently: Base64 (Java Platform SE 8).
1. Choose a picture first
mm.png
2. Create HTML demo file template
test.html
<!DOCTYPE html><html><head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width"> <title>Test Base64 encoding- 2gua</title> <style type="text/css"> #thisImage { margin: 20px auto; -webkit-border-radius: 50%; border-radius: 50%; background: url() no-repeat center center; background-size: contains; border: 8px solid #EDEDED; width: 128px; height: 128px; } </style></head><body> <div id="thisImage"></div></body></html> Note that url() is empty, and we will implant the generated Base64 encoded string into it later.
3. Write Java programs
Here, a two-way implementation of Base64 encoding and decoding will be implemented, although only Base64 decoding is required in this example. The comments of Java programs are very clear, just click the code:
`Base64Trans.java`package com.gua;/** * Created by 2gua on 2014/10/5. */import java.io.IOException;import java.nio.file.*;import java.util.Base64;import static java.lang.System.out;public class Base64Trans { /** * Read content from the image file. * @param path The path to the image file. * @return Byte array of binary image content. * */ private byte[] readFile(Path path) { byte[] imageContents = null; try { imageContents = Files.readAllBytes(path); } catch (IOException e) { out.println("Error reading file...~zZ"); } return imageContents; } /** * Encode image files, the encoding content output is in {@code String} format. * @param imageContents Byte array of binary image content. * @return {@code String} format encoded content. */ private String base64Encoding(byte[] imageContents) { if(imageContents != null) return Base64.getEncoder().encodeToString(imageContents); else return null; } /** * Decode the image file. * @param imageContents String format of the image file to be decoded. * @return Binary content of the decoded image file. */ private byte[] base64Decoding(String imageContents) { if(imageContents != null) return Base64.getDecoder().decode(imageContents); else return null; } /** * Write the decoded binary content into the file. * @param path The path written to. * @param imageContents The decoded binary content. */ private void writeFile(Path path, byte[] imageContents) { if(imageContents != null) try { Files.write(path, imageContents, StandardOpenOption.CREATE); } catch (IOException e) { out.println("Write file error...~zZ"); } } public static void main(String[] args) { Base64Trans bt = new Base64Trans(); String encodingString = bt.base64Encoding(bt.readFile(Paths.get("D:/temp/mm.png"))); out.println("Binary picture file Base64 code: " + encodingString); bt.writeFile(Paths.get("D:/temp/mm2.png"), bt.base64Decoding(encodingString)); out.println("Task end..."); }}The program results are as follows:
Binary picture file Base64 code: iVBORw0KGgoAAAANSUhEUgAAAIAIAAACACAYAAADDPmHLAAAAABGdBTUEAALGPC/xhBQAAACB... (n multi-character omitted here) 8xNTIwL2Vhc3lpY29uLmNuL2Vhc3lpY29uLmNuL2Nkbi1pbWcuZWFzeWljb24uY24vcG5nLzEwODcwLzEwODcwODYucG5nPLffdwAAAABJRU5ErkJggg==Task end...
4. Final setting
To reference Base64-encoded content in HTML file template test.html, there is another step to do: add the following content to the beginning of Base64-encoded content: data:image/png;base64,
The final result is similar to this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAIAAACACAYAAADDPmHLAAAAABGdBTUEAALGPC/xhBQAAACB... (n multi-character omitted here) 8xNTIwL2Vhc3lpY29uLmNuL2Vhc3lpY29uLmNuL2Nkbi1pbWcuZWFzeWljb24uY24vcG5nLzEwODcwLzEwODcwODYucG5nPLffdwAAAABJRU5ErkJggg==
After that, implant this long string into url() brackets of the following line of code:
background: url() no-repeat center center;
If the image is in JPG format, please change the png in data:image/png;base64 above to jpeg, and if it is GIF format, change it to gif. OK, refresh the page and see the results:
There are circles because we set some CSS3 effects.
We also implemented Base64 decoding and generated a new mm2.png image. Open mm2.png in the image browser, and the effect should be exactly the same as mm.png.
In fact, every time the new JDK version is released, there are many updates of all sizes, just whether you are interested in discovering it. Java is always so robust and reassuring.
Summarize
The above is the entire content of this article. I hope the content of this article will be of some help to your study or work. If you have any questions, you can leave a message to communicate.