基于原生的微信小程序的裁剪组件
支持npm包管理的模式项目目录下执行
npm i @dw/wx-cropper
也可以直接使用项目中的wx-cropper文件夹的文件,放到自己的项目中去
在使用的页面的.json文件中注册
{
"usingComponents": {
"my-cropper": "@dw/wx-cropper"
}
}
注册之后在使用的wxml的文件中引入该组件
<my-cropper
bind:close="hideCut"
cutRatio="{{cutRatio}}"
wx:if="{{showCropper}}"
imageSrc="{{imageSrc}}"
cropperRatio={{cropperRatio}}
cropperWidth={{cropperWidth}}
minCropperW={{minCropperW}}/>
close
: 事件 参数为img, 在点击关闭的时候没有这个参数,只有在生成图片的时候才有 path: string;
width: number;
height: number;
hideCut () {
this.setData({
showCropper: false
})
const img = arguments[0].detail
if (img && img.path) {
console.log(img)
this.setData({
imageInfo: img
})
}
}
cutRatio
初始化的裁剪比例/**
* @type number
* @description 初始化的裁剪比例
* @example 0 默认初始化的裁剪区域宽高为图片的宽高,且裁剪比例不固定
* @example 0.5 宽高比例固定,且宽和高的比例为 1 : 2 的比例
* @example 2 宽高比例固定,且宽和高的比例为 2 : 1 的比例
*/
cropperRatio
组件裁剪显示区域的最大比例/**
* @type number
* @description 组件裁剪显示区域的最大比例,如果裁剪的图片过长,则做限制,默认最大宽高比例为 宽640 / 高960 (宽高比例)
* @example 1 如果CROPPER_WIDTH宽度是720px,那么裁剪区域的高度也就是 CROPPER_WIDTH / cropperRatio 为 720px;
*/
imageSrc
需要裁剪的图片地址 支持本地和线上cropperWidth
裁剪区域的宽度 默认720 居中显示minCropperW
裁剪区域最小宽度, 如果是等比例 按照最短的计算