Question

我在Lightswitch HTML5中实现了一个Photoupload函数来自： http://www.paulspatterson.com/lightswitch-html-client-save-images/

一般情况下它可以工作，但似乎ios设备创建错误的exif数据（图像显示为旋转）。提到了一个使用以下js的解决方案： https://gokercebeci.com/dev/canvasresize

不幸的是我的javascript技能太低了，无法合并以下2个javascripts：请帮助：）

function createHTML5Uploader() {
    var $file_browse_button = $('<input name="file" type="file" style="margin-bottom: 10px;" />');
    $element.append($file_browse_button);

    var $preview = $('<div></div>');
    $element.append($preview);

    $file_browse_button.bind('change', function handleFileSelect(evt) {
        var files = evt.target.files;
        if (files.length == 1) {
            var reader = new FileReader();
            reader.onload = function (e) {
                previewImageAndSetContentItem(e.target.result, $preview, contentItem);
            };
            reader.readAsDataURL(files[0]);
        } else {
            // if no file was chosen (e.g., if file-choosing was cancelled), 
            //     explicity ensure that the content is set back to null: 
            previewImageAndSetContentItem(null, $preview, contentItem);
        }
    });
}

和

$('input[name=photo]').change(function(e) {
var file = e.target.files[0];
canvasResize(file, {
width: 300,
height: 0,
crop: false,
quality: 80,
//rotate: 90,
callback: function(data, width, height) {
$(img).attr('src', data);
}
});
});

Answer 1

简而言之，EXIF Orientation没有被处理，有些相机会为你做旋转/镜像，其他人会保留＆＃34; raw＆＃34;图像并依赖于最终软件来读取EXIF方向并适应旋转/镜像。使用Nihilogic的exif.js库来阅读客户端的EXIF信息。

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

$('<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);
 }

Lightswitch HTML5图片上传（IOS设备）轮换问题（结合2个javascripts）

1 个答案: