3

我在让这个应用程序的功能在 Wordpress 中 100% 工作时遇到了很多麻烦。我在 Wordpress 之外的服务器上有一个应用程序的工作版本，但是当涉及到 Wordpress 时，事情变得很奇怪。

我现在遇到的问题是该过程的第二步，当用户可以裁剪图像的一部分以显示在二维码的中心时。在这里您可以看到工作示例以及应该发生的情况，在这里您可以看到它在第二步中的中断位置。我猜在 Wordpress 主题的某个地方存在 CSS 冲突，因为 jQuery 似乎工作正常。检查元素显示，在工作示例中，边距和高度/宽度正在通过裁剪的选择进行动态调整，但在损坏的示例中，高度/宽度根本没有调整。我尝试禁用主题中的所有 CSS 文件，但无济于事。

这是我们用来更新右边图像的jQuery，因为左边的图像被裁剪了。我们使用的插件是 jcrop。问题是在工作版本上，高度和宽度使用内联 css 正确更新，但在损坏的版本上，这些值不是，但是边距在两个版本上都正常工作。

//function to update preview divs
jQuery(function($){
    var jcrop_api, boundx, boundy; //set jcrop variables

    function updatePreview(c)
    {
        if (parseInt(c.w) > 0)
        {
            var rx = 73 / c.w;
            var ry = 73 / c.h;

            jQuery('#preview').css({
                width: Math.round(rx * boundx) + 'px !important',
                height: Math.round(ry * boundy) + 'px !important',
                marginLeft: '-' + Math.round(rx * c.x) + 'px !important',
                marginTop: '-' + Math.round(ry * c.y) + 'px !important'
            });
        }
    };

    //function to update coordinates
    function updateCoords(c)
    {
        jQuery('#x').val(c.x);
        jQuery('#y').val(c.y);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
    };

    jQuery(window).load(function () {
        var PathToFile = jQuery('#cropImageDisplay').attr("name");
        jQuery('#cropImageDisplay').load("/wp-content/themes/howfarqr/resources/php/uploadedImage.php?fn="+PathToFile).hide().fadeIn('slow', function() {
            jQuery('#cropbox').Jcrop({ //jcrop selector
                onChange: updatePreview, //function to execute onChange
                onSelect: updateCoords, //function to execute onSelect
                aspectRatio: 1 //asepct ratio
            },function(){ //callback function
                    var bounds = this.getBounds(); // get the real image size
                boundx = bounds[0]; //assign x
                boundy = bounds[1]; //assign y
                //store jcrop api as jcrop variable
                jcrop_api = this;
            });
        });
    });
});
4

1 回答 1

2

boundx问题与boundy未定义的事实有关。查看传递给的对象.css()（使用断点）：

> console.log({
    width: Math.round(rx * boundx) + 'px',
    height: Math.round(ry * boundy) + 'px',
    marginLeft: '-' + Math.round(rx * c.x) + 'px',
    marginTop: '-' + Math.round(ry * c.y) + 'px'
})
▼ Object
    height: "NaNpx"
    marginLeft: "-25px"
    marginTop: "-9px"
    width: "NaNpx"
    __proto__: Object
> boundx
undefined

现在看看为什么会这样。

啊哈：

在此处输入图像描述

两个页面上的 JavaScript 不一样！

现在看起来 Jcrop 回调函数根本没有被调用。不知道为什么。

这两个页面也使用不同版本的 Jcrop。有效的实现有 v0.9.9，而无效的实现是使用看起来是 0.9.8的东西。

于 2011-11-23T18:26:14.570 回答