git裁切_【微信小程序】图片裁剪前端裁剪后端裁剪

Cropping

小程序码

组件介绍

微信小程序裁剪组件&＃xff0c;支持前端裁剪和后端裁剪两种方式

1.前端裁剪&＃xff1a;将裁剪框指定的区域&＃xff0c;单独生成图片&＃xff0c;获取裁剪图片的临时文件路径

2.后端裁剪&＃xff1a;获取裁剪框相对于原图的像素坐标位置&＃xff0c;将裁剪区域坐标以及原图临时文件路径&＃xff0c;传到后端进行图片裁剪

git地址

软件架构

使用微信小程序自定义组件开发

使用说明

目录结构

image

使用步骤

1.下载组件源代码&＃xff0c;放入小程序里自己定义的组件文件夹(例如/component)

2.创建图片裁剪界面(例如/pages/image)

3.image.json引入image-cropper组件

{

"usingComponents": {

"image-cropper":"/component/image-cropper/index"

}

}

4.image.wxss设置背景色为黑色

page{

background-color: black;

}

.white{

color: #fff;

font-size: 30rpx;

}

.black{

color: #333333;

font-size: 30rpx;

margin-top:10rpx;

}

5.image.wxml

添加image-cropper标签&＃xff0c;如下

可以在image-cropper标签内添加操作按钮&＃xff0c;如下

裁剪框宽高比值

裁剪图片质量

等比缩放

自由缩放

获取裁切参数

获取裁切图临时文件地址

6.image.js

首先需要在onLoad方法中&＃xff0c;设置裁剪标签属性

// 裁切对象

var cropper

Page({

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

// 根据标签id&＃xff0c;获取到image-cropper对象&＃xff0c;存储在全局变量cropper中

cropper &＃61; this.selectComponent("#my-cropper");

// 设置标签属性

this.setData({

// 从图片选择界面传原图临时文件地址给src

src: options.imagePath,

// 设置裁剪框宽高比值为 1(宽:高&＃61;1:1&＃61;1)

aspectRatio: 1,

// 设置是否等比缩放

isProportion: true,

// 设置裁剪后的图片质量

quality: 1

})

},

})

然后添加按钮相应的绑定方法

// 裁切对象

var cropper

Page({

/**

* 页面的初始数据

*/

data: {

},

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

// 根据标签id&＃xff0c;获取到image-cropper对象&＃xff0c;存储在全局变量cropper中

cropper &＃61; this.selectComponent("#my-cropper");

// 设置标签属性

this.setData({

src: options.imagePath,

aspectRatio: 1,

isProportion: true,

quality: 1

})

},

btn1(e){

// 图片宽高比值

this.setData({

aspectRatio: e.detail.value.toFixed(1)

})

},

btn2(e){

// 图片质量

this.setData({

quality: e.detail.value.toFixed(1)

})

},

btn3(){

// 打开等比缩放

this.setData({

isProportion: true

})

},

btn4(){

// 关闭等比缩放

this.setData({

isProportion: false

})

},

btn5(){

// 调用image-cropper对象的getResults函数&＃xff0c;获取裁剪参数

cropper.getResults(res &＃61;>{

console.log(res)

})

},

btn6(){

// 调用image-cropper对象的getImagePath函数&＃xff0c;获取裁剪后图片的地址

cropper.getImagePath(res &＃61;>{

console.log(res)

})

}

})

组件文档

标签属性

参数

类型

默认值

说明

src

String

-

图片路径

aspectRatio

Number

1

裁剪框宽高比值&＃xff0c;范围 [0.4,3]

isProportion

Boolean

false

是否开启宽高等比缩放

quality

Number

1

前端裁剪的裁剪图片质量&＃xff0c;范围 (0,1]

标签对象函数

1.获取裁剪结果参数

getResults(res&＃61;>{ })

获取到的res如下

{

"crop":{

"width": 1000, //裁剪完成的图片宽

"height": 1000, //裁剪完成的图片高

"top": 100, //裁剪完成的图片左上角,到原图顶部的距离

"left": 200 //裁剪完成的图片左上角,到原图左边的距离

},

"originalImageInfo":{

"width": 1920, //原图宽

"height": 1080, //原图高

"path": "images/1.jpg", //原图路径

"type": "jpeg", //原图类型

"orientation": "up" //原图拍摄设备方向

}

}

获取到的裁剪参数的对应关系图

获取到裁剪参数后&＃xff0c;将原图以及裁剪参数传到后台进行裁剪

2.获取裁剪图片地址

getImagePath(res&＃61;>{ })

获取到的res如下

{ "path" : "http://tmp/wxb172f5d66edf27aa.jpg" }