如何设置 JQuery JCrop 预览以在文件上传后进行裁剪？

Question

我正在使用 JCrop jquery 库，我在使用 HTML 文件控件上传文件后提供图像预览。

查看部分（演示数据）

<input type="file" id="photograph" />
<img src="#" id="target" />

Javascript代码

// for setting img src
function readURL(input) { 
    console.log("readURL");
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#target').attr('src', e.target.result);
            console.log("inside if =>"+e.target.result);       
        }

        console.log("outside IF");
        reader.readAsDataURL(input.files[0]);

    }
}

// for setting pre-selected cropping area
function setProperties(){ 
   console.log("set properties");

   $('#target').Jcrop({         
              setSelect: [0,12,23,43]
        }); 

}

// on change event for fileupload
$("#photograph").change(function(){ 
    console.log("change event called!");
    readURL(this);
    setProperties();
});

输出

 change event called!
 readURL
 outside IF
 set properties
 inside if=>data:image/jpeg;base64,/9j/4gIcSUNDX1BST0ZJTEUAAQEAAAIMbGNtcwIQAABtbnRyUkdC…sXK2t+4UdmuSVl64hb2gMHh1Nhm83DAdQJniIM6eZUxzuYCR2my3FSwGpVbzBdwlgrrc/

我想在上传图像文件后设置一些属性，但是 "inside if=>" [请参阅上面发布的输出] 在最后被调用。那么为什么会这样呢？以及我应该如何解决这个问题？

Answer 1

您必须在设置图像 source 和图像 loaded

后调用 setProperties

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

        reader.onload = function (e) {
            $('#target').attr('src', e.target.result);
            console.log("inside if =>"+e.target.result); 
            // Call after source setted and image file loaded
            setProperties();      
        }

        console.log("outside IF");
        reader.readAsDataURL(input.files[0]);

    }
}

如何设置 JQuery JCrop 预览以在文件上传后进行裁剪？

How can I set JQuery JCrop preview for cropping after fileupload?

javascript

jquery

jcrop