百科.dev
全部条目在线工具AI 编程趋势榜开源项目技术资讯提交条目
登录
< 返回工具列表
J

jquery-cropper

> 编程语言
开源

一个用于 Cropper.js 的 jQuery 插件包装器。

731 stars0 点赞1 次浏览
访问官网GitHub

工具介绍

一个用于 Cropper.js 的 jQuery 插件包装器。

jquery-cropper

用于 Cropper.js 1.0 的 jQuery 插件包装器。

  • 演示

主要 npm 包文件

dist/
├── jquery-cropper.js        (UMD)
├── jquery-cropper.min.js    (UMD, compressed)
├── jquery-cropper.common.js (CommonJS, default)
└── jquery-cropper.esm.js    (ES Module)

开始使用

安装

bash
npm install jquery-cropper jquery cropperjs@1

包含文件:

xml

使用方法

使用 $.fn.cropper 方法进行初始化。

xml
css
/* Limit image width to avoid overflow the container */
img {
  max-width: 100%; /* This rule is very important, please do not ignore this! */
}
javascript
var $image = $('#image');

$image.cropper({
  aspectRatio: 16 / 9,
  crop: function(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
  }
});

// Get the Cropper.js instance after initialized
var cropper = $image.data('cropper');

选项

请参阅 Cropper.js 1.0 的可用 选项。

javascript
$().cropper(options);

方法

请参阅 Cropper.js 1.0 的可用 方法。

javascript
$().cropper('method', argument1, , argument2, ..., argumentN);

事件

请查看 Cropper.js 1.0 的可用 事件。

javascript
$().on('event', handler);

没有冲突

如果您必须使用具有相同命名空间的其他插件,只需调用 $.fn.cropper.noConflict 方法即可恢复到原有状态。

xml

浏览器支持

Issues· 0 开放

查看全部 Issues在 GitHub 打开

暂无开放 Issues,或尚未同步最近议题。

> 标签

JavaScriptcroppercropperjsimage-cropperimage-processing

暂无评论,来聊聊你的看法吧

> 工具信息

发布日期2026年8月1日
最后更新2026年9月17日
分类编程语言
定价开源

> 相关工具

T
TypeScript
JavaScript 的超集,为前端与全栈提供静态类型
P
Python
通用编程语言,广泛用于 Web、数据与 AI
G
Go
Google 推出的简洁高效系统语言