@atlaskit/media-avatar-捡取器
提供用于选择、拖动并调整图像外观大小的组件。 它还提供了预定义的相声的默认列表.
安装
yarn add @atlaskit/media-avatar-picker
使用组件
本地图像上传和裁剪
这个 AvatarPickerDialog 允许用户上传或降下本地图像,然后将平板并缩放到所期望的裁剪视图.
默认的缩放水平应当符合收成区域内的图像. 比收成面积小的图像被放大.
该组件会限制图像的平面和缩放,以确保用户只能选择有效的区域.
预定义的神通
该组件还允许用户从预定义的外观图像中选择. 这些可以通过它提供给组件 avatars 属性.
预定义的相机在用户选择图像时被隐藏.
只有客户端
该组件目前被设计为将所选的图像或外观递回. 它不使用任何特定的API来存储或上传,这是目前消费者的责任. 换句话说, 您需要一个解决方案来存储选中的图像或外观 .
限制
组件目前只接受 image/gif, (中文(简体) ), image/jpeg,以及 image/png mIME类型。 SVG 目前不支持.
组件只接受最高为10Mib的图像.
处理错误
该组件将处理客户端的下列错误:
- 坏格式 - 如果用户上传一个格式不好的图像, 或丢弃无效的 MIME 类型, 将会显示错误
- 图像大小 > 10Mib - 如果用户上传或降下大于 10Mib 的图像大小, 将会显示错误消息
见 errorMessage 属性下方可以设置您的自定义错误消息.
无障碍
该部分旨在完全无障碍,并遵循《世界儿童保护公约》的准则:
键盘导航
- 图像裁剪: 使用箭头键在裁剪区域内移动并定位图像
- 标签导航: 所有交互式元素都可以通过键盘访问
- 重点管理: 整个接口清晰的视觉焦点指标
屏幕阅读器支持
- ARIA 标签: 描述所有交互式元素的标签
- 实时通知: 裁剪时移动图像时实时反馈
- 语义标记:辅助技术的适当作用和结构
特征
- 完全键盘可访问图像裁剪和导航
- 图像定位屏幕阅读器通知
- 高对比度重点指标
- 整个接口的逻辑标签顺序
API 密码
onImagePicked?: (file: File, crop: CropProperties) => void
此属性在用户单击时被提高 保存 按钮,则有一个选定的图像。 通过了两个论点: file:File 是一个圆柱形,而收成设置是一个包含 x:number, (中文(简体) ),y:number,以及 size:number 值,这些值都相对于所选图像的坐标.
说明 由于对Safari QQ 10.0和IE11的限制,a Blob 对象将返回而不是一个 File。这仍然允许访问图像字节数据以便利上传,基本上减去文件名和日期属性.
这个 x 财务报告和审定财务报表 y 代表作物面积的来源。 这个 size 值是一个代表作物面积宽度和高度的单一值。 要从所选图像中获取收割区域,只需取取被剪接的矩形(x, (中文(简体) ), y, (中文(简体) ), size, (中文(简体) ), size)来自给定的图像.
onImagePickedDataURI?: (dataURI: string) => void
此属性在用户单击时被提高 保存 按钮,并有一个选定的图像。 选定的图像作为数据URI字符串提供.
onAvatarPicked: (avatar: Avatar) => void
此属性在用户单击时被提高 保存 按钮,并有预定义的已选择的外观,没有选择图像。 一个 Avatar 对象为 a dataURI 财产通过.
onCancel: Function
当用户点击时, 此属性会上升 取消 按钮.
说明 无法关闭对话框 。 由消费者负责从UI中重新提交并删除对话框.
imageSource?: string
(可选) 此属性用于设置选中的图像, 以便组件随其可见而打开 .
该值应为有效的数据URI字符串. 如果给出了无效的数据URI,则会触发不良格式错误状态并显示消息.
avatars: Array<Avatar>
此属性用于提供一系列预定义的外观. 这个 Avatar 对象是一个单一的简单类型 dataURI: string 属性。 为方便起见,此类型从 @atlassian/media-avatar-picker 模块与 AvatarPickerDialog 组件.
defaultSelectedAvatar?: Avatar
(可选) 该财产与 avatar 属性。 它允许您设置当前选中的预定义外观 。 默认情况下,即使 avatars 属性设置.
title?: string
(可选) 对话框的标题文本 。 默认是 上传相机。 。 。 .
primaryButtonText?: string
(可选) 主按钮文字. 默认是 保存。 。 。 .
errorMessage?: string
(可选) 此属性允许消费者显示错误消息 。 这可能是从呼叫服务。 如果大于 125 个字符串( 对话框内约有 3行) , 字符串会被剪接 .
用法示例
下面是制作 " Avatar PickerDialog " 的例子。 对话应被 " Modal Transition " 部分包住,以便在关闭时淡出.
import { AvatarPickerDialog, Avatar } from '@atlaskit/media-avatar-picker';
import { ModalTransition } from '@atlaskit/modal-dialog';
const avatars: Array<Avatar> = [{ dataURI: 'some-data-uri' }];
const App = ({ isOpen }) => (
<ModalTransition>
{isOpen && (
<AvatarPickerDialog
avatars={avatars}
onImagePicked={(selectedImage, crop) => {
console.log(selectedImage.size, crop.x, crop.y, crop.size);
}}
onAvatarPicked={selectedAvatar =>
console.log(selectedAvatar.dataURI)
}
onCancel={() => /* we need to close the dialog... */}
/>
)}
</ModalTransition>
);