如何在上传之前获取图像的裁剪坐标

How to get the crop coordinates of an image before upload?

本文关键字：图像 获取 裁剪 坐标      更新时间：2023-09-26

用户点击浏览按钮选择图像后，我正在尝试获取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/

请帮忙！

试着像这样将Jcrop调用移动到FileReader.onload回调中（我在你小提琴里的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);
});
相关文章：