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

【问题标题】：Jcrop - Issues with croppable area and image sizeJcrop - 可裁剪区域和图像大小的问题
【发布时间】：2015-02-23 19:00:35
【问题描述】：

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

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

首先我将这些库添加到头部标签的最下方（我注释掉了第一个，因为网站有 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 中不起作用并且在按钮单击事件中起作用。此外，我必须让它在页面加载时自动工作，而不是通过单击按钮。

有什么建议吗？

【问题讨论】：

标签： css html canvas crop jcrop

【解决方案1】：

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

Jcrop 元素使用 CSS3 过渡动画
有一条 CSS 规则应用于 jcrop 元素的父元素，用于控制内部所有 img 标记的宽度、高度、最大宽度或最大高度

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

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

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

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

【讨论】：