微信小程序图片裁剪image-cropper插件使用
首先非常感觉大佬的图片裁剪插件 image-cropper,下面就是大佬的地址
文章地址https://developers.weixin.qq.com/community/develop/article/doc/000aecd2f38df8efb55a0250b5bc13
大佬Demo地址:https://github.com/wx-plugin/image-cropper-demo
image-cropper插件github地址:https://github.com/wx-plugin/image-cropper
1.功能强大。
2.性能超高超流畅,大图毫无卡顿感。
3.组件化,使用简单。
4.点击中间窗口实时查看裁剪结果。
体验Demo
初始准备
先在component中创建 image-cropper插件文件夹,再把上面四文件个放入文件夹中
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.简单示例,具体用法看demo中的代码
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回调里使用) | 否 |
注意事项:
1、图片裁剪的格式不一致问题
解决办法:在 image-cropper.js 文件中找到fileType,改成你想裁剪后的类型,插件代码中的类型是png,根据自己需求改
2、点击确认后把截取的图片路径f返回上一页展示
//当前页代码
submit(){this.cropper.getImg((obj)=>{//obj.url就是裁剪后的图片路径app.globalData.imgSrc = obj.url;//获取当前页面var pages = getCurrentPages();var prevPage = pages[pages.length - 2]; //上一个页面//直接调用上一个页面的setData()方法,把数据存到上一个页面中去prevPage.setData({tempImageUrl:obj.url})//返回上一页wx.navigateBack({delta: -1})});},//上一页代码data: {imageList:[],imageIndex:0},onShow: function () {var pages = getCurrentPages();var currPage = pages[pages.length - 1]; //当前页面//取出图片剪切页面传过来的图片urllet tempImageUrl = currPage.data.tempImageUrl;if(tempImageUrl != undefined && tempImageUrl != ''){let index = this.data.imageIndex;this.data.imageList[index] = tempImageUrl;this.setData({imageList: this.data.imageList})//清空返回页带来的值currPage.setData({tempImageUrl:""})}}
微信小程序图片裁剪image-cropper插件使用相关推荐
- 微信小程序图片裁剪插件image-cropper
image-cropper 一款高性能的微信小程序图片裁剪插件,支持旋转.设置尺寸 功能亮点 1.支持旋转支持旋转支持旋转. 2.性能超高超流畅,大图毫无卡顿感. 3.可以设置导出图片尺寸. 4.自由 ...
- 微信小程序图片裁剪功能的实现
文章目录 图片上传与处理 图片尺寸适配 图片显示与裁剪框 裁剪框的拖动与缩放 增加canvas并裁剪图片 保存图片到相册 总结 在之前的博文中,已经介绍了如何使用在前端开发中,实现较方便自由的图片裁剪 ...
- uniapp微信小程序图片裁剪插件,支持自定义尺寸、定点等比例缩放、拖动、图片翻转、剪切圆形/圆角图片、定制样式
qf-image-cropper2.0 图片裁剪插件 1.效果预览: 2.平台支持: 1.支持微信小程序(移动端.PC端.开发者工具) 2.H5平台(2.1.0版本起) 3. 支持APP平台(2.1. ...
- 小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能
小程序图片裁剪插件image-cropper实现个人头像上传裁剪功能 参考文档:小程序图片裁剪插件 image-cropper 整体效果流程图 一.第一步引入image-cropper,放在dist文 ...
- 微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版
微信小程序图片(头像)裁剪工具we-cropper含2d版-完整版 本教程基于 we-cropper v1.4.0,非本人同意禁止任何形的转载 we-cropper官方下载链接 效果图 一.非2d版 ...
- 微信html5图片裁切,微信小程序图片裁剪工具we-cropper
微信小程序图片裁剪工具we-cropper 一款灵活小巧的canvas图片裁剪器 在线体验 Feature 实用的API 灵活的钩子函数 多场景的demo可供参考: 常规裁剪 上传裁剪头像 裁剪网络图 ...
- 微信小程序使用腾讯视频插件-uniapp-详细篇(2022.1.27)
微信小程序使用腾讯视频插件-uniapp篇(无需资质审核包过) 1.添加插件:微信小程序平台-设置-第三方设置-添加插件-搜索:腾讯视频 2.在uniapp-manifest.json中-源码视图,添 ...
- 微信小程序图片轮转播放
微信小程序图片轮播 步骤一:创建项目,注意创建的路径,路径中涉及到的文件最好用英文命名. 这里将项目创建在D:\SotfWare\WechatPG\test1.test1是项目的文件名.创建结束之后, ...
- 小程序 图片上传php后台,微信小程序图片选择、上传到服务器、预览(PHP)实现实例...
微信小程序图片选择.上传到服务器.预览(php)实现实例 小程序实现选择图片.预览图片.上传到开发者服务器上 后台使用的tp3.2 图片上传 请求时候的header参考时可以去掉(个人后台验证权限使用 ...
最新文章
- arcgis python编程案例-ArcGIS Python编程案例-电子资料链接
- 提高PHP性能的53个技巧
- Hadoop之MapReduce工作流程
- [转]写好shell脚本的13个技巧
- taskscheduler java_java – 针对不同任务的不同taskScheduler
- linux c之通过管道父子进程实现同步通信
- 自己的php工具,用PHP自己编写的站长工具箱
- linux 6.2 期末考试题,redhat6.2-linux考试试卷(带部分答案)
- request和response的中文乱码问题
- Java Swing设置主窗口位置居中方法
- 事务失败返回_分布式事务方案 TCC
- Editplus 3添加edtool插件文档
- 大航海时代4+伙伴加入条件和港口一览
- 冯仑《企业领导最容易犯的十大错误》
- React:一、初识react
- python工作遇到的问题_工作中遇到的问题收集--.NET
- 一位老学长的真实互联网校招求职心路历程~
- 433遥控器无线解码 1527中断方式解码 51单片机
- [论文翻译] Unpaired Image-to-Image Translation using Adversarial Consistency Loss
- KVM虚拟化管理工具之virtsh(三)