jcrop仅附加一次

Question

我需要执行客户端裁剪。

为此，我正在使用jcrop。

现在，由于我的裁剪表面需要适合模式，所以我做了以下工作：（直接阅读下面的代码或直接从代码中读取]

当输入发生更改时，我销毁任何jcrop元素并从我的图像中删除所有max-“ width：100％”以外的所有css标签，以便图像不会溢出。

然后来自输入的文件被分配在图像标签中。之后，显示模态，以便我可以获取适当大小的图像元素的宽度和高度。

然后，将这些尺寸分配给jcrop的boxWidth和boxHeight参数，并将其附加到图像，以使jcrop元素也不会溢出。我必须将代码放置在fileReader.onload函数内，以便仅在更改图像源之后才采用尺寸。

$(document).on('change', '#upload', function (evt) {
        var tgt = evt.target || window.event.srcElement,
            files = tgt.files;
        $('.jcrop-holder').remove();
        $('#studentPhoto').css("width", "");
        $('#studentPhoto').css("height", "");
        $('#studentPhoto').css("visibility", "");
        $('#studentPhoto').css("display", "");

        // FileReader support
        if (FileReader && files && files.length) {
            var fr = new FileReader();
            var w;
            var h;
            fr.onload = function () {
                $('#studentPhoto').attr('src', fr.result)
                $('#imgMOD').show('fast', '', function () {
                    w = $('#studentPhoto').width();
                    h = $('#studentPhoto').height();
                    $('#studentPhoto').Jcrop({
                        onSelect: showCoords,
                        aspectRatio: 667 / 500,
                        boxWidth: w,
                        boxHeight: h
                    });
                });


            }
            fr.readAsDataURL(files[0]);
        }

        function showCoords(c) {
            $('#x').text(c.x);
            $('#y').text(c.y);
            $('#x2').text(c.x2);
            $('#y2').text(c.y2);
            $('#w').text(c.w);
            $('#h').text(c.h);
        };
    });
问题是，即使调试器显示已到达.jcrop部分，它在第二次发送信号后也不会创建jcrop元素。第一次可以完美运行。

我需要执行客户端裁剪。为此，我正在使用jcrop。现在，由于我的裁剪表面需要适合模式，所以我做了以下工作：（在下面阅读或直接阅读代码）当有...

Answer 1

好吧，Jcrop我不知道这有什么不同，但是这种删除Jcrop的方法解决了这个问题。