如何在jQuery裁剪器中设置裁剪框

本文介绍了如何在jQuery裁剪器中设置裁剪框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我使用的是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.