wx-cropper：微信小程序 图片裁剪工具，简单易用（小程序wxfor）

wx-cropper：微信小程序 图片裁剪工具，简单易用（小程序wxfor）

wx-cropper

基于原生的微信小程序的裁剪组件

引入

支持npm包管理的模式项目目录下执行

npm i @dw/wx-cropper

也可以直接使用项目中的wx-cropper文件夹的文件，放到自己的项目中去

使用

在使用的页面的.json文件中注册

{ "usingComponents": { "my-cropper": "@dw/wx-cropper" }}

注册之后在使用的wxml的文件中引入该组件

参数配置

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 裁剪区域最小宽度， 如果是等比例 按照最短的计算

裁剪区域固定宽高

不固定比例

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。