如何在jQuery裁剪器中设置裁剪框 [英] How to set crop box in jquery cropper

问题描述

我使用的是cropper，这是我在 cropper网站上找到的一个jQuery插件. > 我在1080h上具有全高清1920w的图像大小，并且需要让用户能够以675 * 1080的固定框大小进行裁剪，我的问题是如何设置此插件的选项?
我尝试执行以下操作未成功:

I'm using cropper, it's a jquery plugin I found at cropper web site.
I have an image size full hd 1920w on 1080h, and I need to give the user ability to crop in fixed box size 675*1080, my question is how do I set the options of this plugin ?
I've tried to do the follow with no success:

var c1 = $('.cropper-example-1 img').cropper({
            //aspectRatio: 10 / 16,
            strict: true,
            background:false,
            guides: false,
            highlight: false,
            dragCrop: false,
            movable: false,
            resizable: false,
            mouseWheelZoom: false,
            touchDragZomm:false,
            built: function () {
                //alert(1);
               // $(this).cropper('setData', 0, 0, 675, 1080,90);
               // $(this).cropper('setCropBoxData', 0, 0, 1920, 1080);
            }
        });

推荐答案

经过许多次尝试后，这对我有用...我需要将初始宽度和高度设置为240px x 607px，这是我的代码.

After soo many trials this worked for me... i needed to set the initial width and height to 240px by 607px and this is my code.

       var cropper;
       var imgx;

        $(function(){
            var imgx = $('#cpdiv').find('img');
            cropper = new Cropper(imgx[0], {                    
                //aspectRatio: 1/2,
                autoCropArea: 0,
                strict: false,
                guides: false,
                highlight: true,
                dragCrop: false,
               //cropBoxMovable: false,
                cropBoxResizable: false,

                data:{
                    width: 240,
                    height:  607,
                },

                crop(event) {
                    console.log(event.detail.width);
                    console.log(event.detail.height);
                },

            });

     });

我尝试使用setCropBoxData({})函数，该函数不起作用..但是这种方法对我有用.

i tried using the setCropBoxData({}) function which didnt work.. but this approach worked for me.

这篇关于如何在jQuery裁剪器中设置裁剪框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！