Question

我有一个我正在裁剪的预览，以及一个显示正在裁剪的部分的缩略图。每当我选择新图像时，预览都不会更新，而是保持先前使用的图像。但是，缩略图会更新，因为它会显示新图像。这是我的代码......

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

        reader.onload = function (e) {
            $('#previewSub2').attr('src', e.target.result);
            $('#previewSub').attr('src', e.target.result);
            ...
            var imgwidth = $("#previewSub2").width();
            var imgheight = $("#previewSub2").height();
            $("#previewSub").Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                aspectRatio: 1,        
                setSelect: [0,imgwidth,0,0],
                minSize: [90,90],
                addClass: 'jcrop-light' 
             });
             ...

previewSub2是缩略图，previewSub是我要更新的JCrop图像。由于某种原因，以下代码不会更新它：

 $('#previewSub').attr('src', e.target.result);

以下是showPreview的其余代码：

function showPreview(coords)
{
var imgSize = $("#previewSub").height();
var imgWidth =  $("#previewSub").width();

var rx = 150 / coords.w;
var ry = 150 / coords.h;

$('#x').val();
$('#y').val();
$('#w').val();
$('#h').val();

$('#previewSub2').css({
    width: Math.round(rx * imgWidth) + 'px',
    height: Math.round(ry * imgSize) + 'px',
    marginLeft: '-' + Math.round(rx * coords.x) + 'px',
    marginTop: '-' + Math.round(ry * coords.y) + 'px'
});
}

有人可以向我解释更新previewSub需要做些什么吗？

Answer 1

您可以像这样重新加载jcrop组件

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

    reader.onload = function (e) {
        if( jcrop_api ) {
             jcrop_api.destroy();
        }

        $('#previewSub2').attr('src', e.target.result);
        $('#previewSub').attr('src', e.target.result);
        ...
        var imgwidth = $("#previewSub2").width();
        var imgheight = $("#previewSub2").height();

        jcrop_api = $("#previewSub").Jcrop({
            onChange: showPreview,
            onSelect: showPreview,
            aspectRatio: 1,        
            setSelect: [0,imgwidth,0,0],
            minSize: [90,90],
            addClass: 'jcrop-light' 
         });

更新：如果你使用的是最新版本的jcrop，你应该设置api：

$("#previewSub").Jcrop({
    onChange: showPreview,
    onSelect: showPreview,
    aspectRatio: 1,        
    setSelect: [0,imgwidth,0,0],
    minSize: [90,90],
    addClass: 'jcrop-light' 
    }, function() {
        jcrop_api = this;
});

Jcrop保存以前的图像

1 个答案: