css - Jcrop-可裁剪区域和图像尺寸问题

我对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和button click事件中工作。另外，我必须使它在页面加载时自动工作，而不是通过单击按钮。
有什么建议吗？

最佳答案

这是一个疯狂的猜测，因为你没有提供任何演示，但我遇到了类似的问题，在以下情况下：
使用CSS3转换设置Jcrop元素的动画
有一个CSS规则应用于jcrop元素的父元素，操作内部所有img标记的宽度、高度、最大宽度或最大高度
对第二种情况的修复是显而易见的—您只需要将自定义规则应用于需要调整的图像—不要忘记Jcrop在DOM中创建了自己的元素，与初始图像位于同一容器中。
如果使用CSS3转换，则需要在元素的所有转换完成后调用Jcrop：

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

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

关于css - Jcrop-可裁剪区域和图像尺寸问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27657574/

JCrop

css - Jcrop-可裁剪区域和图像尺寸问题