当前位置：首页 > 网页特效 > 动画效果

最好的移动端图片剪裁组件AlloyCrop

分类：动画效果日期：2024-05-14 点击(2) 评论(0)

简介

AlloyCrop组件需要CSS3 transform库transform.js和移动手势库AlloyFinger的支持。

```html
<script src="transform.js"></script>
<script src="alloy-finger.js"></script>
<script src="alloy-crop.js"></script>
```
#####  API
```html
new AlloyCrop({
    image_src: "img src",
    circle: true, // optional parameters , the default value is false
    width: 200, // crop width
    height: 100, // crop height
    output: 2, // output resolution --> 400*200
    ok: function (base64, canvas) { },
    cancel: function () { },
    ok_text: "yes", // optional parameters , the default value is ok
    cancel_text: "no" // optional parameters , the default value is cancel
});
```
#####  配置参数
|  参数 | 是否必填  | 描述  |
| ------------ | ------------ | ------------ |
| image_src| 必须| 需要裁剪图片的src地址| 
| circle| 不必须，默认是false| 代表选取的是否是圆形还是矩形，默认是矩形，注意:圆形选取裁剪出来的也是正方形图片| 
| width| 必须| 选区的宽| 
| height| 必须| 选区的高| 
| output| 必须| 输出的倍率。比如如果output为2，选区的宽300，选区的高100，输出的图像的分辨率为 (2×300，2×100）| 
| ok| 必须| 点击ok按钮的回调| 
| cancel| 必须| 点击cancel按钮的回调| 
| ok_text| 不必须，默认是ok| ok按钮的文本| 
| cancel_text| 不必须，默认是cancel| cancel按钮的文本|

web299.com

最好的移动端图片剪裁组件AlloyCrop

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果