Lightswitch HTML5图像上传(IOS设备）旋转问题(结合2个Java脚本）

简而言之，EXIF方向没有被处理，一些相机为您进行旋转/镜像，另一些相机将保留"原始"图像，并依赖最终软件读取EXIF方向并相应旋转/镜像。使用Nihilogic的exif.js库读取客户端的exif信息。

使用此样板代码，并对其进行相应调整。我添加了一个我在网上找到的最大高宽功能。

$('<input id="fileInput" name="file" type="file" accept="image/*"/>').bind('change', function handleFileSelect(evt) {
    var file = evt.target.files[0];
    if (file != null) {
        $.fileExif(file, function (exif) {
            var reader = new FileReader();
            reader.onload = function (e) {
                    var tempImg = new Image();
                    tempImg.src = reader.result;
                    tempImg.onload = function () {
                        var canvas = document.createElement('canvas');
                        canvas.width = tempW;
                        canvas.height = tempH;
                        var ctx = canvas.getContext("2d");
                        //Move center of image to 0,0 so we rotate around images center
                        ctx.translate(tempW * 0.5, tempH * 0.5);
                        //INSERT ROTATION/SCALE FROM BELOW HERE
                        //Set image top left back to 0,0 so the image draws at upper left
                        ctx.translate(-tempW * 0.5, -tempH * 0.5);
                        ctx.drawImage(this, 0, 0, tempW, tempH);
                        //Get the image data 
                        var dataURL = canvas.toDataURL("image/jpeg");
                        //Parse image data and set contentItem.value 
                        previewImageAndSetContentItem(dataURL, contentItem);
                };
            };
            reader.readAsDataURL(file);
        });
    }
}).click();

根据EXIF方向执行一些旋转和/或镜像。

//*********************************************************************************************************************
//
// !! Handle the EXIF orientation to correctly render the image, otherwise we end up with rotated and/or squashed images !!
//
// Entry #6 in the table says that the 0th row in the stored image is the right side of the captured scene, 
// and the 0th column in the stored image is the top side of the captured scene.
//
// Value    0th Row     0th Column
// 1        top         left side  <--- how it should be, no transform required
// 2        top         right side
// 3        bottom      right side
// 4        bottom      left side
// 5        left side   top
// 6        right side  top
// 7        right side  bottom
// 8        left side   bottom
//
// OR Visually
//
// 1        2         3         4         5             6             7             8
//
// 888888   888888        88    88        8888888888    88                    88    8888888888
// 88           88        88    88        88  88        88  88            88  88        88  88
// 8888       8888      8888    8888      88            8888888888    8888888888            88
// 88           88        88    88
// 88           88    888888    888888
//
// To correct transform as follows:
//
// 1) 
// 2) flip horizontal
// 3) rotate 180
// 4) flip vertical
// 5) rotate +90 (clockwise) and flip horizontal
// 6) rotate +90 (clockwise)
// 7) rotate +270 (clockwise) and flip vertical
// 8) rotate +270 (clockwise)
//
if (exif.Orientation == 2){
   ctx.scale(1, -1);
   //ctx.rotate(0 * Math.PI/180);
}
if (exif.Orientation == 3) {
    //ctx.scale(1, -1);
    ctx.rotate(180 * Math.PI/180);
 }
 if (exif.Orientation == 4) {
    ctx.scale(-1, 1);
    //ctx.rotate(0 * Math.PI/180);
 }
 if (exif.Orientation == 5) {
    ctx.scale(1, -1);
    ctx.rotate(90 * Math.PI/180);
 }
 if (exif.Orientation == 6) {
    //ctx.scale(1, -1);
    ctx.rotate(90 * Math.PI / 180);
 }
 if (exif.Orientation == 7) {
    ctx.scale(-1, 1);
    ctx.rotate(270 * Math.PI / 180);
 }
 if (exif.Orientation == 8) {
    //ctx.scale(1, -1);
    ctx.rotate(270 * Math.PI / 180);
 }