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

Posted 2023-02-25

【中文标题】jcrop 预览未显示突出显示的位置

【英文标题】：jcrop preview not showing highlighted location

【发布时间】：2016-03-30 13:06:26

【问题描述】：

我无法在预览 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
                        );
                    
                
            

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

【参考方案1】：

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

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

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

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

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

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

【讨论】：

非常感谢，与您提出的方法相得益彰。