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
                        });
                    }
                }
            }

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

谢谢，Laziale

Answer 1

看起来你的原始图像是通过CSS或其他任何东西调整大小的，并且Jcrop会将它的坐标搞砸了。

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

使用boxWidth/boxHeight选项，这使得Jcrop在框尺寸内按比例缩放图像
使用trueSize选项，在DOM中的图像对象上已设置高度和宽度时可用。

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

这是 JSFiddle
（请注意，图像是通过CSS缩放的，并检查Jcrop的初始化方式）。

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

1 个答案: