Image BASE64 Encoding

We often do jquery plug-ins When we need to insert some custom controls, such as buttons, and we think the button tag is ugly, and different browsers show the effect is not the same, this time we need to use the image, of course, we can add SRC through the img tag, This time we need jpg, PNG, GIF and other formats of the image matching, so that the need to add additional files, so that the portability of the file is poor, this time we can convert the image to Base64 encoding, the image into a character in the HTML file.

The BASE64 encoding requires converting every three bytes of 8Bit to four 6Bit bytes (3*8 = 4*6 = 24) and then adding 6Bit two bit high 0 to four 8Bit bytes, that is, the converted string will theoretically be 1/3 longer than the previous one. No 76 characters 1 to add a newline character, when the original text is not a multiple of 3, the remaining bytes of the original text according to the encoding rules continue to go alone (1 to 2,2 to 3; not enough digits with 0 completion), and then fill 4 bytes with a = number. This is why some Base64 encodings end with one or two equals signs, but the equals sign is only two. So when the original text is divided by 3 in any case it is only possible that the 0,1,2 is one of the three numbers. If the remainder is 0, it means that the original byte count is exactly a multiple of 3 (ideally). If it is 1, turn to 2 Base64 encoded characters, in order to let the BASE64 encoding is a multiple of 4, it is necessary to fill 2 equal signs, similarly, if 2, it is necessary to fill 1 equal signs.

There are many tutorials on the Base64 character encoding network. I mainly introduce how to convert the image to Base64 encoding, JS or HTML code, in fact, using PHP program Ape all know this is actually very simple, PHP comes with a function file_get_contents the uploaded image into a string type, and then through the base64_ Encode can then convert the string to the corresponding BASE64 encoding.

　　

1 string file_get_contents string $filename $use _include_path false Resource $context $offset $maxlen ]]] )23stringbase64_encodestring$data  )

With the above two functions you can convert the image to a Base64 code, and then HTML can load the BASE64 code through a CSS stylesheet.

　　

. Image {    width:4px;     height:8px;      background-image:url (data:image/png;  Base64,base64 code);}

Here is a picture of my own to do the BASE64 code of the tool, the implementation of the method is the same as mentioned above.

Image to Base64 Code tool

　　

Image BASE64 Encoding