iOS photo reversal analysis and mobile/page-side processing strategies and ideas

Objective:
A few days ago, I wrote a technical analysis on the upside-down of uploading photos on iOS phones: iOS photo inversion analysis and PHP server processing.

But the idea is to deal with it from the server, which is quite common.
Today, we will talk about how to solve this problem from the mobile side/page end, focusing on talking about ideas.
　　

Significance:
But the mobile Internet has its unique background, so far the power consumption and save traffic , is a lot of mobile products diligently the direction of efforts.
In addition, mobile phone photo size, generally larger, so directly to the server, often consumes a lot of traffic, in the weak network environment, the user waits for a long time, often will fail, experience is very bad . Therefore, the Mobile/page side (WebApp) for image compression/scaling, it is very meaningful.
At the same time, since the compression and size of the image has been done, why not together the rotation of the picture is also done together.

Feasibility Analysis:
Because the iOS photo picture is reversed, it is a non-act of iOS, but it writes orientation information to the EXIF information header (JPEG and TIFF files).
To solve the problem of inversion, first of all, to see whether the mobile/page side, to obtain EXIF information.
Fortunately, we have exif.js, this open source JS Tool Library, help us pave the way.
This is the data link: exif.js read the image metadata http://code.ciaoca.com/javascript/exif-js/.
The processing of the image Exif information head is very concise:
*) HTML related code:

<input type= "File" accept= "image/*" capture= "Camera" onchange= "selectfileimage (this);" >

*) use code snippet for EXIF:

function Selectfileimage (file) {var Orientation = null;　　　　Get Photo Direction angle property, user Rotation control exif.getdata (file, function () {exif.getalltags (this);　　Orientation = Exif.gettag (this, ' Orientation '); });}

Here the variable file is, the input control selects the concrete picture file to obtain the object, orientation is the rotation information.
Value and meaning of orientation:

Rotation angle	Parameters
0°	1
Clockwise 90°	6
90° counterclockwise	8
180°	3

Invert and scale:
on the page side, you need to handle the limit size size, such as setting a maximum width value (limit width is not limited to high), while also solving the picture rotation problem.
The idea is to use canvas redraw to achieve, 1). Determine the direction of rotation, 2). Picture size reduction Adjustment 3). Determine the canvas size, 4). The drawing process.

Image = new Image (); image.onload = function () {var canvas = document.getElementById ("MyCanvas");　　var expectwidth, Expectheight; *) determine the width and height of the target if (Orientation = = 6 | |　　　　Orientation = = 8) {expectwidth = Image.height;　　Expectheight = Image.width;　　　　} else {expectwidth = Image.width;　　Expectheight = Image.height;　　}//*) Max width limit and decrease change var max_width = 480;　　　　if (Expectwidth > Max_width) {expectheight = Expectheight * max_width/expectwidth;　　Expectwidth = Max_width;　　　　} if (Orientation = = 6) {//clockwise 90°ctx.save ();　　　　Ctx.translate (EXPECTWIDTH/2, EXPECTHEIGHT/2);　　　　Ctx.rotate (* math.pi/180.0);　　Ctx.drawimage (image,-EXPECTHEIGHT/2,-EXPECTWIDTH/2, Expectheight, expectwidth);　　　　} else if (Orientation = = 8) {//Counter-clockwise 90°ctx.save ();　　　　Ctx.translate (EXPECTWIDTH/2, EXPECTHEIGHT/2);　　　　Ctx.rotate (math.pi/180.0);　　　　Ctx.drawimage (image,-EXPECTHEIGHT/2,-EXPECTWIDTH/2, Expectheight, expectwidth);　　Ctx.restore (); } else if (Orientation = = 3) {//180°ctx.save ();　　　　Ctx.translate (EXPECTWIDTH/2, EXPECTHEIGHT/2);　　　　Ctx.rotate (Math.PI);　　　　Ctx.drawimage (image,-EXPECTWIDTH/2,-EXPECTHEIGHT/2, Expectwidth, expectheight);　　Ctx.restore ();　　} else {ctx.drawimage (image, 0, 0, expectwidth, expectheight);　　}//*) gets the rotated and compressed picture data. var imagedata = Canvas.todataurl ("Image/png");}

　　The whole process is relative, or relatively simple.

Here is the drawimage of canvas, how to draw the idea of rotating pictures.
1). Move the origin to the midpoint of the canvas first, translate
2). Perform rotation operation, Rorate
3). To draw, at this time the canvas drawing area coordinate range (-W/2,-H/2, W/2, H/2), need attention .

Image upload:
Image compression and rotation, the image of the data upload, and how to achieve it?
One way of thinking is as mentioned above:

var imageData = Canvas.todataurl ("Image/png");

The essence of the work is to put the binary data of the image, converted to base64 encoded data, so that it can be uploaded through the ordinary Ajax, but also the implementation of the asynchronous file upload work.

A related list of PHP and Nginx articles:
nginx Service Configuration---PHP service access
nginx+tomcat cluster configuration (1)---root settings and multi-backend distribution configuration
nginx+tomcat cluster configuration (2)---Separation of static and dynamic resources
nginx+tomcat cluster configuration (3)---Get real client IP
nginx+tomcat cluster configuration (4)--rewrite rules and multi-application root setup Ideas

Postscript:
It should be said that fortunately, through this simple example, tracking positioning, to the final problem solving, actually learned a lot. Before really like a well-to-do, think a lot of problems, just a moment of neglect, in the small problem, there are brainiac, thanks to each day, no matter rain, is a beautiful day.

Personal site & Public number:

    The smart house of Little Wood

    Personal Game Folio site (still under construction ...): www.mmxfgame.com

iOS photo reversal analysis and mobile/page-side processing strategies and ideas