About Base64 upload picture problem

Recently writing interface ———— about image upload

The foreground uses the Vuejs, uses the base64 to upload the picture, filedata: "Data:image/jpeg;base64,9j/4aaqsk ...", puts this data directly in the address bar, also can display the picture, But to the background with Base64 decoding finished to generate new pictures, open a new picture, unexpectedly not open, and later found Filedata in Data:image/jpeg;base64, is the identifier, not the picture content, need to get rid of, and then decode. Found himself not very understanding of Base64, looked for information to see:

What is base64. Base64 is one of the most common encoding methods for transmitting 8Bit bytecode on the network, Base64 is a method that represents binary data based on 64 printable characters. You can view the rfc2045~rfc2049, which has a MIME detail specification.

The URL of some pictures on the Web page with src or CSS background pictures followed by a large string of characters, such as: Data:image/png;base64, Ivborw0kggoaaaansuheugaaaaeaaaakcayaaabidfamaaaagxrfwhrtb2z0d2fyzqbbzg9izsbjbwfnzvjlywr5ccllpaaaahhjrefueno8zjsoxcambfb　/keauffr0cbng3nqpw68arzdalozpppfibhh5eab8b+tlt9myq6i1buqfaq1cksvcxz2acs6406kugpt5/ Lckuvgz5bdcsb13zo99zodczgvt4mjjzmvkqcha68iiepb86gaiov8cdadliuqbs7md3waaaabjru5erkjggg%3d%3d. So what is this? This is data uri scheme. The
Data uri scheme is defined in RFC2397 to embed some small data directly into a Web page so that no longer has to be loaded from an external file. For example, the above string of characters, in fact, is a small picture, these characters copy sticky paste to Google's address bar and turn to, you can see it.

In the data URI above, data represents the contract name for the acquisition, Image/png is the data type name, base64 is the encoding method of the data, followed by the Image/png file Base64 encoded data.
Currently, the types that Data URI scheme supports are:
Data:, Text data
Data:text/plain, Text data
data:text/html,html Code
Data:text/html;base64,base64 coded HTML code
DATA:TEXT/CSS,CSS Code
Data:text/css;base64,base64 coded CSS Code
Data:text/javascript,javascript Code
Data:text/javascript;base64,base64 coded JavaScript code
DATA:IMAGE/GIF;BASE64,BASE64 encoded GIF image data
DATA:IMAGE/PNG;BASE64,BASE64 encoded PNG image data
DATA:IMAGE/JPEG;BASE64,BASE64 encoded JPEG image data
DATA:IMAGE/X-ICON;BASE64,BASE64 encoded icon image data
Base64 simply, it translates some 8-bit data into standard ASCII characters, and there are many free base64 encoding and decoding tools that can be encoded in PHP using function Base64_encode (), such as Echo Base64_encode ( file_get_contents (' wg.png '));
At present, IE8, Firfox, Chrome, opera browsers support this small file embedding.

Requirements: Store BASE64 encoded images in a BLOB type database, and take out the display when needed

Background:

String Base64str=new string (Log.getrequest_imgdata ());//log is the image's get method returned to the byte[of the entity brackets

String New str=new string ("\" Data:image/jpg;base64, "+base64str+" \ ");/assemble Base64 string header

Response.getwriter (). Write (NEWSTR)//Return full Base64 string to foreground

Front desk JS:

var srcurl = appjp.urlreqimg + "? log_id=" +row.log_id;//Request URL

$.get (srcurl,function (data) {

var Imgwindow = $ ("#imgDetail"). HTML ("

$ ("#showImg"). Window ({title: "Picture Details", Width: "Auto"}). Window ("open"). Window ("center");

})

The implementation of the above implemented from the database extract BLOB type BASE64 image data (byte[in Java) into a string, and sent to the foreground display

But in the test found that a slightly larger image (hundreds of KB) in some IE browsers can not be displayed, query data discovery is IE8 below the Base64 decoding length limit of the problem

Solution: Replace the background to the foreground transfer image data form the form of streaming

Background:

String Base64str=new string (Log.getrequest_imgdata ());

Base64decoder decoder=new Base64decoder (); byte[] Imgbyte=decoder.decodebuffer (BASE64STR);//decode Base64 picture data

Response.setcontenttype ("Image/jpeg");

Servletoutputstream outputstream = Response.getoutputstream ();

Outputstream.write (Imgbyte);

Outputstream.flush ();

Front desk JS:

var srcurl = appjp.urlreqimg + "? log_id=" +row.log_id;var Imgwindow = $ ("#imgDetail"). HTML ("

$ ("#showImg"). Window ({title: "Picture Details", Width: "Auto"}). Window ("open"). Window ("center");