jquery Mobile Upload Image

Need to introduce exif.js to correct the image orientation of the iphone

function Readimage (file) {
if (!/image\/\w+/.test (File.type)) {
Alert ("Upload image format not supported");
return false;
}
var Orientation = null;
var url = URL | | Webkiturl;
Get photo Direction angle properties, user Rotation control
Exif.getdata (file, function () {
Alert (Exif.pretty (this));
Exif.getalltags (this);
Alert (Exif.gettag (this, ' Orientation '));
Orientation = Exif.gettag (this, ' Orientation ');
Return
});

var reader = new FileReader ();
Reader.onload = function (e) {
if (Navigator.userAgent.match (/iphone/i)) {
//If the direction angle is not 1, it is necessary to rotate added by Lzk
if (Orientation! = "" "&& Orientation! = 1) {
Getimgdata (This.result, Orientation, function (Data_url) {
The corrected image data can be used here.
$ ("#ID"). attr ("src", data_url);

});
// }
//}
}
Reader.readasdataurl (file);

}

Base64 of the @param {string} img Picture
@param {int} dir exif gets the direction information
@param {Function} Next callback method, returns the Base64 after the correction direction
function Getimgdata (img, dir, next) {
var image = new Image ();
Image.onload = function () {
var degree = 0, drawwidth, drawheight, width, height;
DrawWidth = This.naturalwidth;
Drawheight = This.naturalheight;
The following changes the size
var maxside = Math.max (DrawWidth, drawheight);
if (Maxside > 1024) {
var minside = math.min (DrawWidth, drawheight);
Minside = minside/maxside * 1024;
Maxside = 1024;
if (DrawWidth > Drawheight) {
DrawWidth = Maxside;
Drawheight = Minside;
} else {
DrawWidth = Minside;
Drawheight = Maxside;
// }
//}
The following changes the size
var maxside = Math.max (DrawWidth, drawheight);
if (Maxside > 640) {
var minside = math.min (DrawWidth, drawheight);
Minside = Minside/maxside * 640;
Maxside = 640;
if (DrawWidth > Drawheight) {
DrawWidth = Maxside;
Drawheight = Minside;
} else {
DrawWidth = Minside;
Drawheight = Maxside;
}
}

var canvas = document.createelement (' canvas ');
Canvas.width = width = drawwidth;
Canvas.height = height = drawheight;
var context = Canvas.getcontext (' 2d ');
Judging the direction of the picture, resetting the canvas size, determining the rotation angle, the iphone default is the home button on the right side of the horizontal screen shooting method
Switch (dir) {

iphone horizontal screen shot, this time the home button on the left
Case 3:
degree = 180;
DrawWidth =-width;
Drawheight =-height;
Break
iphone vertical screen shooting, the home button at the bottom (normal to take the direction of the phone)
Case 6:
Canvas.width = height;
Canvas.height = width;
degree = 90;
DrawWidth = width;
Drawheight =-height;
Break
iphone vertical screen shot, this time the home button in the top
Case 8:
Canvas.width = height;
Canvas.height = width;
degree = 270;
DrawWidth =-width;
Drawheight = height;
Break
}

Using the canvas rotation correction
Context.rotate (degree * math.pi/180);
Context.drawimage (this, 0, 0, drawwidth, drawheight);
Back to correction picture
Next (Canvas.todataurl ("Image/jpeg", 0.8));//Compression ratio
}
IMAGE.SRC = img;
}

jquery Mobile Upload image