支付宝小程序图片裁剪组件

RainbowsixPlayer

已于 2025-01-20 18:21:58 修改

阅读量1.4k

点赞数 30

文章标签：小程序

于 2025-01-20 18:20:37 首次发布

本文链接：https://blog.youkuaiyun.com/RainbowsixPlayer/article/details/145267395

版权

根据自己的需求对微信端的image-cropper进行修改，可以用在支付宝小程序上了。项目地址

效果

在这里插入图片描述

使用

引入组件

  "usingComponents": {
    "image-cropper":"/image-cropper/image-cropper"
  },
  "allowsBounceVertical":"NO" //记得将页面拖动设置为NO

在编辑器详情，小程序配置中勾上启用component2。

page.axml

<image-cropper a:if="{{true}}}" imgSrc="{{src}}" ref="imagecropper" id="image-cropper" limit_move="{{true}}" disable_rotate="{{true}}" width="{{width}}" height="{{height}}" onLoadimage="loadimage" onConfirm="handleCut" onCancle="handleCancle"></image-cropper>

注意 src路径参考 getimageinfo的路径，绝对路径无效，支持网络地址、本地临时文件、本地缓存文件、本地用户文件、代码包文件。
也可以使用相对路径，需在 mini.project.json 中配置可读取的小程序文件,src="image/1.jpg"。

// mini.project.json 配置示例，下例中 source 为根目录（app.json 所在目录）下的文件夹，* 代表任意文件名。
{
  "assetsInclude": ["image/*.jpg"]
}

page.js

data{
    src: "" ,
    width: 250, //宽度
    height: 250, //高度
},
imagecropper(ref) {
    this.cropper = ref;
},
//加载图片
loadimage(e) {
    console.log('图片加载完成', e);
    my.hideLoading();
    //重置图片角度、缩放、位置
    this.cropper.imgReset();
  },
//裁剪
handleCut(e){
    console.log("裁剪/确认",e)
},
//取消
handleCancle(){
    console.log("取消")
}

handleCut(e)

返回值e:

{
    url: ,//临时文件地址
    width:,//宽度
    height:,//高度
}

url的使用参考文件系统

图片裁剪组件配置说明

配置项名称	类型	默认值	描述
`onCropperload`	Function	null	组件加载完成时触发的回调函数。
`onLoadimage`	Function	null	图片加载完成时触发的回调函数。
`onConfirm`	Function	null	用户确认裁剪操作时触发的回调函数。
`onCancle`	Function	null	用户取消裁剪操作时触发的回调函数。
`imgSrc`	String	“”	要裁剪的图片路径。
`height`	Number	200	裁剪框的高度。
`width`	Number	200	裁剪框的宽度。
`min_width`	Number	64	裁剪框的最小宽度。
`min_height`	Number	64	裁剪框的最小高度。
`max_width`	Number	300	裁剪框的最大宽度。
`max_height`	Number	300	裁剪框的最大高度。
`disable_width`	Boolean	false	是否禁止调整裁剪框的宽度。
`disable_height`	Boolean	false	是否禁止调整裁剪框的高度。
`disable_ratio`	Boolean	false	是否锁定裁剪框的比例（宽高比）。
`export_scale`	Number	3	生成的图片尺寸相对于裁剪框的比例。
`quality`	Number	1	生成的图片质量（范围为0到1）。
`scale`	Number	1	图片的缩放比例。
`angle`	Number	0	图片的旋转角度。
`min_scale`	Number	0.5	图片的最小缩放比例。
`max_scale`	Number	2	图片的最大缩放比例。
`disable_rotate`	Boolean	false	是否禁用图片旋转功能。
`limit_move`	Boolean	false	是否限制裁剪框的移动范围（裁剪框只能在图片内）。