clipper-image v1.0.4

裁剪图片

clipperjs是一款非常强大却又简单的图片裁剪工具，它可以进行非常灵活的配置，支持手机端使用（关键是使用方法简单，几行代码就可以搞定）

演示示例

演示地址

PC端演示

手机端演示

特色功能

• 同时对移动端和pc端的支持
• 支持commonjs、esmoudle和cdn的方式引入
• 使用简单、傻瓜式操作

快速开始

安装

npm install clipper-image --save

引入

 import Clipper from 'clipper-image'

提示：也支持<script src="clipper-image.iife.js"></script>的方式引入

用法

添加1html容器

注意： 容器需要设置宽度和高度，容器的宽度作为滑块验证码的宽度

<div class="clipper" style="width: 800px; height: 480px;"></div>

创建控件

pc端推荐配置

const clipper = new Clipper({
	el: '.clipper'
})

clipper.setImgFile(file)

> 移动端推荐配置
```js
const clipper = new Clipper({
	el: '.clipper',
	clipRect: {
		size: [0.8, 0.8],
		position: 'center',
		visible: true,
		isCanHidden: false, // 是否支持隐藏
		isCanResize: false, // 是否可以更改尺寸大小
		isCanPosition: false // 是否可以改变位置
	}
})

clipper.setImgFile(file)

配置项

方法