jcrop 预览未显示突出显示的位置

Question

我无法在预览 div 中使用 jcrop 显示正确的高亮方块。我得到的区域与实际突出显示的区域不同，请查看下面的屏幕截图：

这是我的代码：

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

                    context.beginPath();
                    //context.arc(50, 50, 50, Math.PI * 2, 0, true); // you can use any shape
                    context.arc(50, 50, 50, Math.PI * 4, 0, true); // you can use any shape
                    context.clip();
                    context.closePath();

                    //context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 100, 100);
                    context.drawImage(imageObj, c.x, c.y, c.w, c.h, 0, 0, 100, 100);
                }
            };

            function getcroparea(c) {
                jQuery('.hdnx').val(c.x);
                jQuery('.hdny').val(c.y);
                jQuery('.hdnw').val(c.w);
                jQuery('.hdnh').val(c.h);
            };


            function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    var image = new Image();
                    var image_default = jQuery('#user-avatar').find('.default img');
                    //var image_edit = jQuery('#user-avatar').find('.edit img');
                    var image_edit = jQuery('#edit-image-form').find('.crop-image-side img');
                    reader.readAsDataURL(input.files[0]);
                    reader.onload = function (e) {

                        image.src = e.target.result;
                        image.onload = function () {
                            var width = this.width;
                            var value = (width - 154) / 2;
                            image_edit.css('left', '-' + value + 'px');
                            image_default.css('left', '-' + value + 'px');
                        };
                        //jQuery('#user-avatar').find('img').attr('src', image.src);
                        jQuery('#imgcrop').attr('src', image.src);
                        jQuery('#<%=hfImageData.ClientID %>').val(image.src);
                        jQuery('#imgcrop').Jcrop({
                            onSelect: getcroparea,
                            onChange: updatePreview,
                            aspectRatio: 1,
                            setSelect: [70, 25, 150, 150],
                            boxWidth: 0,
                            boxHeight: 0
                        });
                    }
                }
            }

知道我应该更改什么以突出显示正确的部分吗？

Answer 1

看起来您的原始图像已通过 CSS 或其他方式调整大小，而 Jcrop 将其坐标搞砸了。

如here 所述，有两种方法可以解决此问题：

• 使用boxWidth/boxHeight 选项，使Jcrop 在框尺寸内按比例缩放图像

• 使用trueSize 选项，在 DOM 中的图像对象上已设置高度和宽度时可用。

将trueSize 设置为图像的naturalWidth 和naturalHeight 似乎效果很好。

这是JSFiddle
（注意图片是通过 CSS 缩放的，并检查 Jcrop 是如何初始化的）。