Mobile phone upload image processing

because the recent period, has been working on the project, which involves the function of the document upload, at the beginning of a point of no clue, the Internet to check a lot of information, QQ Group also asked a lot of people, many people say that if it is an app, you can apply for system permissions, and then go to call the system the bottom of things, But it is in the browser operation, our custom page is also open through the built-in browser, and the browser has a lot of special processing inside, shielding a lot of things, so it is not possible to call the photo function on the page or open the Library directory of the mobile system, of course, These are all just theoretical guesses, and after I looked at the information for two days, I found that the problem could be solved, and the process of implementation is actually very simple. Just use the HTML5 file upload function, and then with the canvas can be. The source code is attached below: [Java] View plain copy print?View code slices to my Code slice<span style="font-family:kaiti_gb2312;font-size:14px;"><! DOCTYPE html> "ZH-CN"> <meta name="Viewport"Content="height=device-height, Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no"> <meta name="format-detection"Content="Telephone=yes"> "UTF-8"> <title> Upload Documents </title> <style>Body {margin:20px -%; color:#777; Text-Align:center; } #result {margin-top:20px; }      </style> class="Text-center"> Upload documents ..."file"/> <div id="result"align="Center"></div> "Text/javascript"Src=".. /js/jquery/jquery-1.9.1.min.js"></script> <script type="Text/javascript"Src=".. /js/localresizeimg.js"></script> <!--mobilebugfix.js-compatible repair mobile device--<script src=".. /js/mobilebugfix.mini.js"Type="Text/javascript"></script> <script type="Text/javascript">          $("Input:file"). localresizeimg ({width: -, Quality:0.8, success:function (result) {varIMG =NewImage (); IMG.SRC=result.base64;                  Console.log (RESULT.CLEARBASE64); //$ ("Body"). Append (IMG); $("#result"). empty (); $("#result"). Append (IMG);//render image (Photo results)$.ajax ({URL:"Uploadimageservlet", type:"POST", Data:{formfile:result.clearbase64}, DataType:"HTML", timeout: +, Error:function () {alert ("Error loading PHP document"); }, Success:function (result) {//alert (result); //Console.log (Result); Alert"uploads success~")                      }                  });      }          }); </script> </body> The above implementation of the process is caused by the first in the front of the picture compression, because the phone is different, there may be a mobile phone camera to force, high pixels, the size of the picture is relatively large, so here through a plug-in compression, and then converted into Base64 code, Then the BASE64 code using AJAX to post to the server, and then in Java or PHP background Base64 decoding, the path is to upload the image of the path address, and then store, write to the file or database inside. In addition, here's a question: a lot of people are talking about built-in browsers, and I've always thought that built-in browsers are a set of browsers that I've developed, and that limits a lot of things. In fact, this is not the case, itself has not re-developed a set of browsers, but the invocation of the system's own browser, according to the different systems of the phone changes. The built-in browser calls the default browser of the phone system, the iOS and Android default browsers are WebKit cores, but the support for HTML5 and CSS3 may be different. Because the browser is only part of the system, the system default browser does not upgrade individually, and the support for HTM5, CSS3 and the system version has a great relationship. Android version directly calls the System browser kernel, iOS is called Safari, you can see the following 1 and 3 effect is identical, 1 is the browser open, 3 is the Meizu MX 3 comes with the System browser open effect. I have tested the above and can run normally. A few photos are attached below:1, which is the effect of opening in the inside2, this is the effect that opens in the mobile UC browser:3, this is the effect that is opened in the system's own browser (PS: My phone is Meizu mx3), but instead of opening the system library directory, it navigates directly to the system's folder root directory.

Mobile phone upload image processing