jcrop 只附加一次

Posted 2023-02-25

【中文标题】jcrop 只附加一次

【英文标题】：jcrop attaches only one time

【发布时间】：2020-01-28 18:11:31

【问题描述】：

我需要执行客户端裁剪。

为此，我正在使用 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 元素。 第一次完美运行。

【参考方案1】：

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

if ($('#studentPhoto').data('Jcrop')) 
                    $('#studentPhoto').data('Jcrop').destroy();