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

当前位置:主页 > Html5库 > html5 canvas > 最好的移动端图片剪裁组件AlloyCrop
最好的移动端图片剪裁组件AlloyCrop
分享:

    插件介绍

    AlloyCrop是一款最小最好的移动端图片剪裁组件。AlloyCrop这个项目是8个月前发布的,作为AlloyFinger的典型案例,发布之后被BAT等其他公司广泛使用。

    浏览器兼容性

    浏览器兼容性
    时间:2017-08-04
    阅读:
麦子学院
简要教程

AlloyCrop是一款最小最好的移动端图片剪裁组件。AlloyCrop这个项目是8个月前发布的,作为AlloyFinger的典型案例,发布之后被BAT等其他公司广泛使用。

AlloyCrop移动端图片剪裁组件截图效果

安装

可以通过npm来安装AlloyCrop组件。

npm install alloycrop                  
                

使用方法

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

<script src="transform.js"></script>
<script src="alloy-finger.js"></script>
<script src="alloy-crop.js"></script>
                
API
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按钮的文本

AlloyCrop移动端图片剪裁组件的github地址为:https://github.com/AlloyTeam/AlloyCrop

网友评论