前端开发前端导航工具/手册更多栏目
  • 折扣返利
  • 网站投稿
  • 广告赞助
  • 书籍/周边
  • 站内搜索
fly63前端网
提交
提交网站

AlloyCrop

网站地址:https://alloyteam.github.io/AlloyCrop/
网站描述:做最好且最小的移动裁剪组件

AlloyCrop 这个项目作为AlloyFinger 的典型案例,发布之后被BAT等其他公司广泛使用。但是发布之后,有两个问题一直没有抽出时间去解决:

  • 裁剪图像的分辨率太小,是否可配?
  • pinch双指放大的时候,放大的中心不是双指中心,是否可以优化?

现在很高兴地告诉大家,AlloyCrop 已经完全搞定了上面两个问题,本文将解释新版本的变化和AlloyCrop背后的原理。


API

new AlloyCrop({
    image_src: "img src",
    className: 'crop-box',
    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地址
className不必须裁剪 DOM 容器的 class
circle不必须,默认是false代表选取的是否是圆形还是矩形,默认是矩形,注意:圆形选取裁剪出来的也是正方形图片
width必须选区的宽
height必须选区的高
output必须输出的倍率。比如如果output为2,选区的宽300,选区的高100,输出的图像的分辨率为 (2×300,2×100)
ok必须点击ok按钮的回调
cancel必须点击cancel按钮的回调
ok_text不必须,默认是okok按钮的文本
cancel_text不必须,默认是cancelcancel按钮的文本

与之前版本最主要的变化就是新增了 output 支持自定义倍率分辨率的图像输出。


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/nav/2314

more>>
相关网站
Barba.js
让网页之间流畅和平滑的过渡
官网GitHub
eagle.js
基于 Vue.js 构建的幻灯片框架
官网GitHub
gitmoji
github的专属表情包
官网GitHub
qrious
纯Js使用Canvas生成QR代码
官网GitHub
libRmath.js
将R语言的Nmath数字库到移植到JavaScript的函数库
官网GitHub
yall.js
一个非常小的图片懒加载器
GitHub
tui.editor
一款所见即所得的Markdown编辑器
官网GitHub
rapid.js
类似ORM的接口和用于API请求的路由器
官网GitHub
Awesomplete
input自动补全功能,超轻量级的,可定制的,简单的自动补全插件,零依赖,
官网GitHub
saveSvgAsPng.js
将页面中的svg保存为png图片js插件
GitHub
screenfull.js
浏览器全屏插件
官网GitHub
proj4js
用于将坐标从一个坐标系转换为另一个坐标系的JavaScript库,包括基准转换
官网GitHub
ueditor
由百度web前端研发部开发所见即所得富文本web编辑器
官网GitHub
DecorativeLetterAnimations
一款基于Anime.js和CSS3的炫酷文字动画特效
官网GitHub
GLightbox
一款支持移动手机的纯js lightbox插件
官网GitHub
Odometer.js
js数字滚动插件
官网GitHub