Jcrop - 可裁剪区域和图像大小的问题

Question

我对Jcrop的可裁剪区域大小有一些问题。在我自己的简单应用程序中，我使用Jcrop没有任何问题，但现在我在另一个Web应用程序（Virtual Viewer Snowbound）中使用Jcrop。这是我的无问题应用程序的屏幕截图：

我将所有Jcrop js和css文件添加到其他网站的文件夹中的正确路径中。我认为文件位置没有问题。但可能是该网站的css和Jcrop的css内部存在冲突并阻止其正常工作。

首先，我将这些库添加到head标签的最下方（我注释掉了第一个，因为网站有Jquery 1.9.1版本，所以它有冲突：

<!-- <script src="js/jquery.min.js" type="text/javascript"></script>-->
    <script src="js/jquery.Jcrop.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

然后编写Jcrop函数：

jQuery(document).ready(function(){
        jQuery(function ($) {

                $('#vvImageCanvas').Jcrop({
                    onChange: updatePreview,
                    onSelect: updatePreview,
                    setSelect: [100,100,200,200],
                    bgColor: 'black',
                    allowSelect: true,
                    allowMove: true,
                    allowResize: true,
                    aspectRatio: 0  
                });

                function updatePreview(c) {
                    if (parseInt(c.w) > 0) {
                        // Show image preview
                        var imageObject = $("#vvImageCanvas")[0];
                        var canvas = $("#previewMyCanvas")[0];
                        var context = canvas.getContext("2d");

                        if (imageObject != null && c.x != 0 && c.y != 0 && c.w != 0 && c.h != 0) {
                            context.drawImage(imageObject, c.x, c.y, c.w, c.h, 0, 0, canvas.width, canvas.height);
                        }
                    }
                };
            }
        );  
    });

如您所见，vvImageCanvas是保存图像的画布，我在previewMyCanvas画布中显示预览。问题是可裁剪的区域大小。如果我在代码下面添加：

style="width:auto!important; height:auto!important;"

进入

<canvas id="vvImageCanvas" class="vvCanvas">

标签然后我有以下视图：

正如您在预览中所看到的，我可以裁剪到我想要的地方但是可裁剪区域与图片的大小不同。我认为这是jcrop-holder div，但我不是css问题的专业。

如果我不添加这些样式选项，那么我有：

可裁剪区域与图片大小相同但图片变小，正如您在预览中看到的那样，裁剪区​​域与我裁剪的区域不同。也许它是根据图像的实际尺寸来裁剪的。

那么，如何在没有冲突的情况下使用Jcrop函数。我添加了

 jQuery.noConflict(true);

但它没有帮助。

感谢。

修改

好的，我意识到了这个问题。

页面加载后，Jcrop函数应该可以正常工作。但是我无法通过将这些代码写入document.ready或window.load块来实现这一点。这就是提出这个问题的原因。

然后我点击按钮运行代码。有效。但我不知道为什么它在document.ready中不起作用并且在按钮点击事件中起作用。此外，我必须自动使页面加载不通过单击按钮。

有任何建议吗？

Answer 1

这是一个疯狂的猜测，因为你没有提供任何演示，但我在下列情况下遇到过类似的问题：

• 使用CSS3过渡动画Jcrop元素
• 有一个CSS规则应用于jcrop元素的父级，用于操作
中所有img标记的宽度，高度，最大宽度或最大高度

第二种情况的修复是显而易见的 - 您只需将自定义规则应用于需要调整的图像 - 不要忘记Jcrop在DOM中创建自己的元素与初始图像在同一容器中。

如果使用CSS3过渡，则需要在元素的所有过渡完成后调用Jcrop：

$("#image").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
  // your Jcrop code
});

使用脚本预加载图像时可能会遇到类似的问题。