imgAreaSelect + 即时更改 aspectRatio

Posted 2023-02-25

【中文标题】imgAreaSelect + 即时更改 aspectRatio

【英文标题】：imgAreaSelect + changing aspectRatio on the fly

【发布时间】：2012-03-20 22:05:14

【问题描述】：

我已经为这个问题苦苦挣扎了一段时间。到目前为止我找不到任何答案/解决方案，我希望你们中的一个可以帮助我。

情况是这样的：我正在使用 imgAreaSelect 裁剪图像。但是用户可以更改纵横比。这通过输入宽度和高度（例如 100:20）来实现。

你可以在下面找到我的代码：

var ias = jQuery('#photo').imgAreaSelect(instance:true);
ias.setOptions(aspectRatio:'100:20');
ias.update();

所以我在 var ias 中有我的 imgAreaSelect 实例。但不知何故，我无法通过SetOptions() 更改设置。 我得到的错误如下：

Uncaught TypeError: Object # has no method 'getOwnPropertyNames'

但奇怪的是，如果我这样做console.dir(ias)，我完全可以在控制台中看到我的对象。其他一切都按原样工作。裁剪效果很好，我只是无法通过setOptions() 编辑我的选项。

我是不是忘记了什么？

提前致谢！史蒂夫

【参考方案1】：

将setOptions 设置为true。见示例代码：

var own = $('#crop_img').imgAreaSelect(x1: 0, y1: 0, x2: $('#crop_img').width(), y2: $('#crop_img').height(),
    handles: true, instance:true, 
    aspectRatio:" $javascript->ratio ",
    resizable:true,
    persistent:true,
    **setOptions:true**,
    imageWidth:" $javascript->width ",
    imageHeight:" $javascript->height ",

【讨论】：

能否请您格式化代码并添加一些解释为什么这会起作用？

我只是通过尝试和调试 onInit 函数发现的。 onInit: function (img, selection) $('#ratio_id').on('change', function() ratio = this.value; own.setOptions(aspectRatio:ratio); own.update(); ); ,