Upload images and problem summary using jQuery-File-Upload on smartphones

I have been working on some activity sites recently. Some of them are uploading images via mobile phones.
First, we recommend an upload plug-in:
JQuery-File-Upload
Https://github.com/blueimp/jQuery-File-Upload
I used uploadify all the time. The free version does not seem to support swf on the mobile phone end, and then I used uploadfive. Various bugs will occur, and the final use of jquery-upload is still good.
To list the simple usage:

The code is as follows:

Copy code

// First introduce js   <Script src = "_ PUBLIC _/js/jquery. min. js"> </script>   <Script src = "_ PUBLIC _/qupload/js/vendor/jquery. ui. widget. js"> </script>   <Script src = "_ PUBLIC _/qupload/js/jquery. Iframe-transport.js"> </script> <Script src = "_ PUBLIC _/qupload/js/jquery. fileupload. js"> </script>       // Initialization   <Script type = "text/javascript"> // UploadingBox. uploadingBoxShow ();   $ ("# FileField"). fileupload ({ Url: "{: U ('Home/Index/upload')}", // file upload address, which can also be directly written in the data-url attribute of input. Validation :{ AllowedExtensions: ['jpeg ', 'jpg', 'PNG '] }, Add: function (e, data ){ UploadingBox. uploadingBoxShow (); Data. submit (); }, // FormData: {param1: "p1", param2: "p2"}, // you can add additional parameters here Done: function (e, result ){ $ ('# Container_box'). hide (); // The done method is the callback function after the upload is completed. You can view other callback functions by yourself. // Note that the result must be differentiated from the ajax data parameter of jquery. This object contains the entire request information. // The returned data is in result. result. Assume that the server returns a json object. If (result. result = "111" | result. result = "222 "){ Window. location = "{: U ('Home/Index/photo ')}"; } Else if (result. result = "Invalid file type ."){ Alert ("Select Upload Images "); } Else { Alert (result. result. msg ); } // Console. log (JSON. stringify (result. result )); } }) </Script>       // Input   <Input type = "file" name = "fileField" class = "file" id = "fileField" size = "28"/>

 
2. The final result is processing the image uploaded by the user and generating a new image. You can add the image to the canvas for rendering and merging.
There is a problem here. In the iphone 7. x version, the user chooses to take a photo and upload the photo to process the merged image.
The problem only occurs in the iphone 7. x version.
The reason is that the size of the uploaded image is too large. As a result, the image generated in the canvas is squashed.
The solution is to process the image when uploading the image in the background.
My solution is to get the lower size. If the size exceeds 3000, the size is reduced by half. This problem is solved.
 
3. Another problem is that when the iphone image is being taken vertically, the image is uploaded upside down. However, it is normal to upload a portrait.
Here we make a judgment.

 

The code is as follows:

Copy code

$ TemplateInfo = @ getimagesize ($ tempFile ); $ Src_image [0] = $ this-> _ getImgRef ($ tempFile ); If ($ templateInfo [2] = 2 ){ $ Pic = exif_read_data ($ tempFile ); If (isset ($ pic ['orientation']) { If ($ pic ['orientation'] = 6 ){ $ Tt = 1; // saved $ Degrees = 270; $ Src_image [0] = imagerotate ($ src_image [0], $ degrees, 0 ); // Imagejpeg ($ src_image [0], 'test'. '.'. $ fileParts ['extension']); // save the image again // $ This-> resizeImage ($ src_image [0], $ templateInfo [0]/2, $ templateInfo [1]/2, $ targetFile ); $ This-> _ saveImg ($ tempFile, $ src_image [0], $ targetFile );   // Crop the image when the image processing is too large If ($ templateInfo [0]> 3000 | $ templateInfo [1]> 3000 ){ $ Image = new \ Think \ Image (); $ Image-> open ($ targetFile ); $ Image-> thumb ($ templateInfo [0]/2, $ templateInfo [1]/2)-> save ($ targetFile );             } $ This-> ajaxReturn ("222 ");             }      } }