Recently, the customer requested to implement the forum post attachment clipping function, did not consider JS and iOS, Android container interaction solution, simply use JS to achieve it. Due to the original attachment upload with the implementation of other plug-ins, so on the basis of a lot of effort, just put jquery-photoclip cutting function barrier up, but finally successfully achieved. In the implementation process encountered a few problems, write down to study with you.
For security reasons, JS operation file is not allowed. So Jquery-photoclip cut down is the Base64 string, put this string upload background decoding to file, it can be. However, if the string is too large, post or geth upload will exceed the maximum number of browser transmission, the background will receive the failure, it seems to use ordinary string upload does not work. Then continue to research, and constantly find information, the problem finally solved, JS to Base64 string decoding into Blob object and then upload, the effect and file upload, PHP in the use of $_files to receive it.
http://www.htmleaf.com/jQuery/Image-Effects/201510292721.html here are jquery-photoclip introduction and download
<!doctype html>#Cliparea {Margin20px; Height:300px; } #file, #clipbtn {Margin20px; } #View {margin:0Auto; Width:200px; Height:200px; } </style> <!--[ifie]> <script src= "Http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js" ></script> <! [endif]-->class= "Htmleaf-container" > <div id= "Cliparea" ></div> <input type= "file" id= "file" > &L T;button id= "CLIPBTN" > Interception </button> <div id= "View" ></div> </article> <script Src= "Http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type= "Text/javascript" ></script> <script >window.jquery | | document.write (' <script src= ' js/jquery-2.1.1.min.js ' ><\/script> ') </script> <script src= "js/ Iscroll-zoom.js "></script> <script src=" js/hammer.js "></script> <script src=" js/ Jquery.photoClip.js "></script> <script>varOne_obj = { /** * * * * @param base64codes * base64 encoding of images*/Funuploadfile:function(base64codes) {varSelf =This ; varFormData =NewFormData (); //The Convertbase64urltoblob function is the first parameter that converts the Base64 encoding into a blob//append function, which is the parameter name of the background fetch data, which is received in PHP with $files[' ImageName ') .Formdata.append ("ImageName", self.Convertbase64urltoblob (base64codes)); //Ajax Submission Form$.Ajax ({//your reception address in the backgroundURL: ' Your_url ',type: "POST",Data: FormData,DataType: "JSON",ProcessData:false,//tell jquery not to process the data sentContentType:false,//tell jquery not to set the Content-type request headerSuccess:function(data) {Console.Log(' Upload succeeded '); },XHR:function(){//XMLHttpRequest objects that use Ajax directly in the jquery function varXHR =NewXMLHttpRequest (); XHR. Upload.addeventlistener ("Progress",function(evt) {if(evt.lengthcomputable) { varPercentComplete = Math.round(evt.loaded * 100/evt.Total ); Console.Log("Submitting." +percentcomplete.tostring () + '% ');//Print upload progress on the console } },false); returnXHR; } }); },/** * Convert image URL data in base64 to BLOB * @param urldata * Base64 picture data represented by URL*/Convertbase64urltoblob:function(urldata) {//remove the header from the URL and convert it to byte varBytes=window.atob (Urldata.Split(‘,‘) [1]); //handling exceptions, converting ASCII codes less than 0 to greater than 0 varAB =NewArrayBuffer (bytes.length); varIA =NewUint8array (AB); for(vari = 0; i < bytes.length; i++) {Ia[i]= bytes.charCodeAt (i); } //The type note here is consistent with the OutputType type in Photoclip initialization return NewBlob ([ab], {type: ' Image/jpeg ')}); },Init:function() { varSelf =This ; $("#clipArea").photoclip ({width: 200,Height: 200,file: "#file",View: "#view",OK: "#clipBtn",OutputType: ' jpg ',Loadstart:function() {Console.Log("in Photo reading"); },LoadComplete:function() {Console.Log("Photo Read complete"); },Clipfinish:function(dataurl) {Console.Log(' Clipping done '); Self.Funuploadfile (Dataurl); } }); } }; One_obj.init (); </script></body>Using the Jquery-photoclip plug-in to achieve mobile-trimmed functionality and upload as BLOB objects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
