Question

我在网站上有一个图片裁剪小部件。在进行任何上传之前，用户使用Jcrop裁剪图像。

然而，当用户上传具有方向数据的照片（通常来自iPhone或类似照片）时，照片显示错误地定向于他们（与他们在计算机上的大多数基本照片浏览器中打开时相比）。

我想要做的是将图像旋转到他们期望的方向。我试图从图像客户端提取exif数据，然后使用它在初始化jcrop之前将css类添加到预览图像。 css类适当地旋转图像。

目前，Jcrop似乎正在创建它的黑盒子（用于图像后面）和裁剪选择框，好像旋转从未发生但图像旋转正在发生所以它看起来都错了。

我尝试修改的小部件中的一些代码如下所示。包含所有代码的jsfiddle是here。请注意，setCoords设置了另一个我没有包含的输入，因为我认为它并不相关。

非常感谢任何帮助。

HTML

<input type="file" />
<div id="preview-image-holder">
    <img id="preview-image" />
</div>

的javascript

var jcrop_api, ratio=1.3, real_width, real_height;

function setCoords(c) { //function to set value of cropping coords widget to a json string of the cropping coordinates
    $('input[id*=cropping_coords]').val(JSON.stringify(c));
}

function base64ToArrayBuffer (base64) {
    base64 = base64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
    var binary_string =  window.atob(base64);
    var len = binary_string.length;
    var bytes = new Uint8Array( len );
    for (var i = 0; i < len; i++)        {
        bytes[i] = binary_string.charCodeAt(i);
    }
    return bytes.buffer;
}

function fixOrientation(image, orientationNum) {
    //adds css class to image dependent on orientation number
    switch(orientationNum) {
        case 2:
            image.addClass('flip'); break;
        case 3:
            image.addClass('rotate-180'); break;
        case 4:
            image.addClass('flip-and-rotate-180'); break;
        case 5:
            image.addClass('flip-and-rotate-270'); break;
        case 6:
            image.addClass('rotate-90'); break;
        case 7:
            image.addClass('flip-and-rotate-90'); break;
        case 8:
            image.addClass('rotate-270'); break;
    }
}

function initJcrop(selector) {
    //intialises jcrop on image
    $(selector).Jcrop({
        onSelect:setCoords,
        onChange:setCoords,
        bgColor:'black',
        bgOpacity:0.4,
        aspectRatio:ratio,
        trueSize:[real_width, real_height]
    }, function() {
        jcrop_api = this;
        dim = jcrop_api.getBounds();
        var x = 0, y = 0, x_ = dim[0], y_ = dim[1];
        var x_r = (x_ / ratio) - y_;
        var y_r = (y_ / ratio) - x_;

        if (x_r > 0) {
            x = x_r / 2;
        }
        if (y_r > 0) {
            y = y_r / 2;
        }
        jcrop_api.setSelect([x, y, dim[0], dim[1]]);
        jcrop_api.setOptions({
            allowSelect:false
        });
    });
}

function readImageURL(input) {
    //uses FileReader to change source of #preview-image to 
    //image from input
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            if(jcrop_api !== undefined) {
                jcrop_api.destroy();
                $('#preview-image').removeAttr('style');
            }
            var exif = EXIF.readFromBinaryFile(base64ToArrayBuffer(e.target.result));
            console.log(parseInt(exif.Orientation));
            var orientation = parseInt(exif.Orientation);
            fixOrientation($('#preview-image'), orientation);
            $('#preview-image').attr('src', e.target.result);
            $('<img />').attr('src', e.target.result).load(function() {
                if ([5,6,7,8].indexOf(orientation)) {
                    real_width = this.height;
                    real_height = this.width;
                } else {
                    real_width = this.width;
                    real_height = this.height;
                }
                initJcrop($('#preview-image'));
            });
        };
        reader.readAsDataURL(input.files[0]);

    }
}

$('input').change(function() {
    readImageURL(this);
});

使用exif数据更改了正确方向的Jcrop图像预览

0 个答案: