javascript - 如何在上传前获取图像的裁剪坐标？

Question

我试图在用户通过单击浏览按钮选择图像后让 Jcrop 插件工作，我们可以使用 FileReader() 加载图像的预览，我能够显示预览，但是当我在浏览按钮的 change 事件上初始化 Jcrop 时，它不起作用。下面是代码。

表单

<form id="form1" runat="server">
    <input type='file' id="imageInput" />
    <img id="blah" src="#" alt="your image" />
</form>

Javascript

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imageInput").change(function(){
    readURL(this);
    $("#blah").Jcrop();
});

在上面的 Javascript 代码中，当我添加 $("#blah").Jcrop(); 时，预览不起作用，而是出现一条黑线。我创建了一个 fiddle 来演示相同的 http://jsfiddle.net/LvsYc/8230/

请帮忙!

Answer 1

尝试像这样在 FileReader.onload 回调中移动 Jcrop 调用(我在你的 fiddle 中的 FF 中尝试过它，它工作正常)

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#blah').attr('src', e.target.result);
            $("#blah").Jcrop();
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imageInput").change(function(){
    readURL(this);
});