上传前如何获取图像的裁剪坐标？答案

【问题标题】：How to get the crop coordinates of an image before upload?上传前如何获取图像的裁剪坐标？
【发布时间】：2016-07-10 09:07:34
【问题描述】：

在用户通过单击浏览按钮选择图像后，我试图让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/

请帮忙！

【问题讨论】：

标签： javascript jquery crop jcrop

【解决方案1】：

尝试像这样在 FileReader.onload 回调中移动 Jcrop 调用（我在你的小提琴中的 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);
});

【讨论】：