• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序图片裁剪插件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

image-cropper

一款高性能的小程序图片裁剪插件,支持旋转。

1.功能强大。
2.性能超高超流畅,大图毫无卡顿感。
3.组件化,使用简单。
4.点击中间窗口实时查看裁剪结果。

体验Demo

初始准备

1.json文件中添加image-cropper

    "usingComponents": { "image-cropper": "../image-cropper/image-cropper" }, "navigationBarTitleText": "裁剪图片", "disableScroll": true

2.wxml文件

	<image-cropper id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" imgSrc="{{src}}" bindload="cropperload" bindimageload="loadimage" bindtapcut="clickcut"></image-cropper>

3.简单示例

    Page({
        data: {
            src:\'\',
            width:250,//宽度 height: 250,//高度 }, onLoad: function (options) { //获取到image-cropper对象 this.cropper = this.selectComponent("#image-cropper"); //开始裁剪 this.setData({
                src:"https://raw.githubusercontent.com/1977474741/image-cropper/dev/image/code.jpg",
            }); wx.showLoading({
                title: \'加载中\' })
        }, cropperload(e){ console.log("cropper初始化完成");
        }, loadimage(e){ console.log("图片加载完成",e.detail); wx.hideLoading(); //重置图片角度、缩放、位置 this.cropper.imgReset();
        }, clickcut(e) { console.log(e.detail); //点击裁剪框阅览图片 wx.previewImage({
                current: e.detail.url, // 当前显示图片的http链接 urls: [e.detail.url] // 需要预览的图片http链接列表 })
        },
    })

参数说明(高亮属性表示对于上个版本有修改,请注意)

属性类型缺省值取值描述必填
imgSrc String 无限制 图片地址(如果是网络图片需配置安全域名)
disable_rotate Boolean false true/false 禁止用户旋转(为false时建议同时设置limit_move为false)
limit_move Boolean false true/false 限制图片移动范围(裁剪框始终在图片内)(为true时建议同时设置disable_rotate为true)
width Number 200 超过屏幕宽度自动转为屏幕宽度 裁剪框宽度
height Number 200 超过屏幕高度自动转为屏幕高度 裁剪框高度
max_width Number 300 裁剪框最大宽度 裁剪框最大宽度
max_height Number 300 裁剪框最大高度 裁剪框最大高度
min_width Number 100 裁剪框最小宽度 裁剪框最小宽度
min_height Number 100 裁剪框最小高度 裁剪框最小高度
disable_width Boolean false true/false 锁定裁剪框宽度
disable_height Boolean false true/false 锁定裁剪框高度
disable_ratio Boolean false true/false 锁定裁剪框比例
export_scale Number 3 无限制 输出图片的比例(相对于裁剪框尺寸)
quality Number 1 0-1 生成的图片质量
cut_top Number 居中 始终在屏幕内 裁剪框上边距
cut_left Number 居中 始终在屏幕内 裁剪框左边距
img_width Number 宽高都不设置,最小边填满裁剪框 支持%(不加单位为px)(只设置宽度,高度自适应) 图片宽度
img_height Number 宽高都不设置,最小边填满裁剪框 支持%(不加单位为px)(只设置高度,宽度自适应) 图片高度
scale Number 1 无限制 图片的缩放比
angle Number 0 (limit_move=true时angle=n*90) 图片的旋转角度
min_scale Number 0.5 无限制 图片的最小缩放比
max_scale Number 2 无限制 图片的最大缩放比
bindload Function null 函数名称 cropper初始化完成
bindimageload Function null 函数名称 图片加载完成,返回值Object{width,height,path,type等}
bindtapcut Function null 函数名称 点击中间裁剪框,返回值Object{src,width,height}

函数说明

函数名参数返回值描述参数必填
upload 调起wx上传图片接口并开始剪裁
pushImg src 开始裁剪图片
getImg Function(回调函数) Object{url,width,height} 获取裁剪之后的图片(图片尺寸 = 图片宽高 * export_scale)
setCutXY X、Y 设置裁剪框位置
setCutSize width、height 设置裁剪框大小
setCutCenter 设置裁剪框居中
setScale scale 设置图片缩放比例(不受min_scale、max_scale影响)
setAngle deg 设置图片旋转角度(带过渡效果)
setTransform {x,y,angle,scale,cutX,cutY} 图片在原有基础上的变化(scale受min_scale、max_scale影响) 根据需要传参
imgReset 重置图片的角度、缩放、位置(可以在onloadImage回调里使用)

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap