【小程序】做了个裁剪图片的自定义组件

一、前提

前段时间要做一个九宫格切图的功能,但是因为九宫格主要是正方形切割,这就不可避免的需要裁剪图片。但是在找遍了全网之后,发现并没有一个很好用的微信小程序裁剪图片组件,很多人推荐的也是前端使用的,在小程序中怎么使用甚至能不能用都是个问题。所以,一拍腿!干脆自己做一个吧!

二、组件详情

2.1 组件预览

首先上组件的预览,看看做出来的效果

2.1.1 图片操作

以下分别为双指缩放、单指移动、裁剪框拖动、图片旋转,旋转90度,镜像+还原

双指缩放示例 单指移动示例 裁剪框拖动示例 图片旋转示例 旋转90度示例 镜像+还原示例

2.1.2 生成图片

点击右下角的对勾可以生成裁剪后的图片
生成图片示例

2.2 组件使用说明

2.2.1 获取组件

码云Gitee

码云Gitee地址:https://gitee.com/yeyouzi/yeyouzi-cropper

首先点击上面的链接进入页面,然后在页面中点击图片右上角的【克隆/下载】按钮,再点击下载ZIP,将组件文件夹下载至本地
码云Gitee下载仓库

GitHub

GitHub地址:https://github.com/yeyouzi-0/yeyouzi-cropper

和上一个类似,进入页面后,首先点击右上角绿色的【code】按钮,然后再点【Download ZIP】获取文件夹
GitHub下载仓库

2.2.2 使用说明

可以参考上面仓库中README文件,也可以按照以下的步骤进行,一样的

安装教程
  1. 下载整个仓库
  2. 在小程序文件夹中新建components文件夹
  3. 将文件夹yeyouzi-cropper复制到components文件夹中
使用说明

按照小程序自定义组件使用方法使用即可

  1. 在json文件中修改usingComponents
"usingComponents": {
   "yeyouzi-cropper": "/components/yeyouzi-cropper/yeyouzi-cropper"//yeyouzi-cropper文件夹的路径
}
  1. 将组件写入到wxml文件中
<yeyouzi-cropper id="yeyouzi-cropper" style="width: 100%;height: 100%;"></yeyouzi-cropper>
  1. 在js文件中,通过id获取组件,并使用init函数初始化裁剪工具,通过回调函数获取临时路径
this.cropper = this.selectComponent("#yeyouzi-cropper");
this.cropper.init({
    imgPath: path,  //imgPath是需要裁剪图片的图片路径,只支持本地或临时路径
    success(res){
        console.log(res) //res即裁剪成功后的图片临时路径
    },
    fail(error){
        console.log(error) //有两种:cancel代表点击了叉,fail代表wx.canvasToTempFilePath生成图片失败
    }        
});

2.3 组件试用

2.3.1 使用微信直接扫描以下二维码可以试用该组件

组件二维码

2.3.2 想要体验更多功能也可以扫描以下二维码,谢谢😘

更多功能二维码

  • 0
    点赞
  • 6
    收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 5

打赏作者

头号夜游子

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值