Cropper.js 文档翻译

newCropper(image,options)

Notes:

  • 最大宽度是预览容器的初始宽度。
  • 最大高度是预览容器的初始高度。
  • 如果设置aspectRatio选项,请确保将预设容器的宽高比设置为相同。
  • 如果预览未正确显示,请将溢出:隐藏样式设置为预览容器。
Options:
option 类型 默认 说明
viewMode Number 0 0:无限制;
1:将裁剪框限制为不超过画布的大小;
2:限制最小画布尺寸以适应容器。如果画布和容器的比例不同,则最小画布将在其中一个维度中被额外的空格包围。
3:限制最小画布尺寸以填充容器。如果画布和容器的比例不同,则容器将无法将整个画布适合其中一个尺寸。
定义裁剪器的视图模式。如果将viewMode设置为0,裁剪框可以在画布外展开,而值为1,2或3将裁剪框限制为画布的大小。 2或3的视图模式将另外将画布限制到容器。请注意,如果画布和容器的比例相同,则2和3之间没有差别。
dragMode String 'crop' 'crop':创建一个新的裁剪框
'move':移动画布
'none':do nothing
定义裁剪器的拖动模式
aspectRatio Number NaN 设置裁剪框的宽高比。默认情况下,裁剪框是空闲比率。
data Object null 如果您已经存储了以前的裁剪数据,将在构建时自动传递给setData方法。
preview Element or String ' ' 添加额外的元素(容器)进行预览。
responsive Boolean true 调整窗口大小时,重新渲染裁剪器。
restore Boolean true 检查当前图像是否是交叉原始图像。
如果是,当克隆图像时,将将crossOrigin属性添加到克隆的图像元素中,并将时间戳添加到src属性以重新加载源图像以避免浏览器缓存错误。
通过将crossOrigin属性添加到图像将停止向图像url添加时间戳,并停止重新加载图像。
如果图像的crossOrigin属性的值为“use-credentials”,则在通过XMLHttpRequest读取图像数据时,withCredentials属性将设置为true。
checkOrientation Boolean true 检查当前图像的Exif方向信息。
更准确地说,读取旋转或翻转图像的Orientation值,然后用1(默认值)覆盖Orientation值,以避免在iOS设备上出现一些问题(1,2)。
需要同时将可旋转和可缩放选项设置为true。
注意:不要相信这一点,因为一些JPG图像有不正确(不标准)方向值。
modal Boolean true 在图像上方和裁剪框下方显示黑色模态。
guides Boolean true 显示裁剪框上方的虚线。
center Boolean true 在裁剪框上方显示中心指示器。
highlight Boolean true 在裁剪框上方显示白色模态(突出显示裁剪框)。
background Boolean true 显示容器的网格背景。
autoCrop Boolean true 启用在初始化时自动裁剪图像。
autoCropArea Number 0.8 (80% of the image) 介于0和1之间的数字。定义自动裁剪区域大小(百分比)。
movable Boolean true 启用移动图像。
rotatable Boolean true 启用旋转图像。
scalable Boolean true 启用缩放图像。
zoomable Boolean true 启用缩放图像
zoomOnTouch Boolean true 启用通过拖动触摸缩放图像。
zoomOnWheel Boolean true 启用通过滚动鼠标放大图像。
wheelZoomRatio Number 0.1 通过滚动鼠标缩放图像时,可以定义缩放倍率。
cropBoxMovable Boolean true 启用通过拖动来移动裁剪框。
cropBoxResizable Boolean true 启用通过拖动调整裁剪框的大小。
toggleDragModeOnDblclick Boolean true 在裁剪器上点击两次时,启用“切割”和“移动”之间切换拖动模式。
minContainerWidth Number 200 容器的最小宽度。
minContainerHeight Number 100 容器的最小高度。
minCanvasWidth Number 0 画布的最小宽度(图像包装器)。
minCanvasHeight Number 0 作物盒的最小高度。
注意:这个大小是相对于页面,而不是图像。
ready Function null “准备”事件的捷径
cropstart Function null
cropmove Function null
cropend Function null
crop Function null
zoom Function null
Methods

由于在加载映像时出现异步进程,因此除了“setAspectRatio”,“replace”和“destroy”之外,还应调用大部分方法。

crop(): 手动显示裁剪框。

new Cropper(image, {
  autoCrop: false,
  ready: function () {
    // Do something here
    // ...

    // And then
    this.cropper.crop();
  }
});

reset():将图像和裁剪框重置为初始状态。
clear():清除裁剪框。
replace(url[, onlyColorChanged]):更换图像的src并重建裁剪器。

  • url:
    • Type: String
    • A new image url.
  • onlyColorChanged (optional):
    • Type: Boolean
    • 如果只改变颜色,而不是大小,那么裁剪器只需要更改所有相关图像的srcs,而不需要重建裁剪器。这可以用于应用过滤器。
    • 如果不存在,其默认值为false。

enable():启用(解冻)裁剪器。
disable():禁用(冻结)裁剪器。
destroy():销毁裁剪器并从图像中删除实例。
move(offsetX[, offsetY]):用相对偏移移动画布(图像包装器)。

  • offsetX:
    • Type: Number
    • 在水平方向移动大小(px)。
  • offsetY (optional):
    • Type: Number
    • 在垂直方向移动大小(px)。
    • 如果不存在,其默认值为offsetX。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,611评论 1 92
  • 点击查看原文 Web SDK 开发手册 SDK 概述 网易云信 SDK 为 Web 应用提供一个完善的 IM 系统...
    layjoy阅读 13,232评论 0 15
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,270评论 0 11
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,048评论 18 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,168评论 1 41