README

该模块提供客户端裁剪用户图片并作为文件流通过ajax调用发送到后端的能力。

使用示例

在前端（需要暗色模板），只需将虚拟标签添加到您的表单中

<dark:use bundle="spiral:cropper-bundle"/>
...
<form.cropper label="Image Cropper" name="image" data-preview="#cropper-preview"/>

上述代码将转换为html，并添加所需的javascript。结果html

<label class="item-form item-file">
    <span class="item-label">Image Cropper</span>
    <input type="file" class="item-input js-sf-cropper" data-filename-selector=".sf-crop-filename" data-name="image"
           context="" data-preview="#cropper-preview">
    <span class="sf-crop-filename btn">Choose a file...</span>
</label>

后端

public function uploadAction()
{
    $image = $this->input->file('image');
    //...
}

裁剪器预览

选项

• wrapper-class - 向包装器传递一个类
• label - 文件输入标签
• label-class - 向文件输入标签传递一个类
• placeholder - 传递给文件名容器的文本
• placeholder-class - 向文件名容器传递一个类
• data-format - 发送数据的方式：裁剪或带裁剪坐标的服务器完整尺寸 默认值："cropped" 可选："full"
• data-ajax-image - 通过ajax请求预加载图片 默认值："false" 可选：预加载图片的url
• data-template - 传递自定义的裁剪器html模板
• data-ajax-address - 提交的请求地址（如果没有表单） 默认值："false" 可选：请求URL
• data-ratio - 锁定的宽高比 默认值：false
• data-filename-selector - 放置文件名的节点选择器。如果以空格开头 - 在节点（文档）中进行全局搜索，否则在节点内部（如果节点是输入，则从父节点开始）
• data-info - 显示什么信息 默认值：[] 示例：data-info="ratio,origSize,croppedSize"
• data-preview - 预览元素的选择器 默认值：""
• data-save-btn-text - 保存按钮文本 默认值："Save"
• data-close-btn-text - 关闭按钮文本 默认值："Close"
• data-custom-btn-class - 向按钮传递自定义类 默认值：""
• data-adjust - 触发裁剪模态框的元素的选择器 默认值："" 如果以空格开头 - 在节点（文档）中进行全局搜索，否则在节点内部（如果节点是输入，则从父节点开始）

安装

composer require spiral/cropper
spiral register spiral/cropper

更新

composer update spiral/cropper
spiral publish spiral/cropper

许可协议

版权所有 (c) 2016 Alex Chepura, Yauheni Yasinau 以及贡献者。在MIT 许可协议下发布。