1. 前言
微信小程序开发已经得到众多开发者的关注和喜爱，并且在中国已经成为了一种非常流行的移动应用开发方式。在这篇文章中，我们将会介绍如何通过微信小程序的API来实现图片选择区域裁剪的功能。希望本文能对想要开发微信小程序的开发者有所帮助。
2. 图片选择和裁剪功能实现
2.1. 图片选择功能实现步骤
要实现图片选择功能，我们需要使用小程序的wx.chooseImage() API，它允许用户从手机相册或者拍照中选择图片。下面是实现步骤：
步骤一： 在wxml中创建一个button标签，并为该标签绑定一个点击事件，代码如下：
<button bindtap="chooseImage">选择图片</button>步骤二： 在js文件中实现选择图片的事件处理函数chooseImage()，代码如下：
Page({
data: {
imageSrc: ""
},
chooseImage: function() {
var that = this;
wx.chooseImage({
count: 1,
sizeType: ["original", "compressed"],
sourceType: ["album", "camera"],
success: function(res) {
that.setData({
imageSrc: res.tempFilePaths[0]
})
}
})
}
})
说明： 在chooseImage()函数中，我们使用了wx.chooseImage()API来弹出图片选择框，其中count为最多可选择的图片数量，sizeType为所选图片的尺寸类型，sourceType为图片的来源类型。如果用户选择了图片，那么图片的本地文件路径将被存储在res.tempFilePaths数组中，我们可以通过setData()函数将其设置为data.imageSrc的值，以便后续使用。
2.2. 图片裁剪功能实现步骤
要实现图片裁剪功能，我们需要使用小程序的wx.previewImage()和wx.getImageInfo() API 以及canvas绘图方式。下面是实现步骤：
步骤一： 在wxml中创建一个image标签，并为该标签绑定一个点击事件，代码如下：
<image bindtap="previewImage" src="{{imageSrc}}" mode="aspectFill"/>步骤二： 在js文件中实现预览图片的事件处理函数previewImage()，代码如下：
Page({
data: {
imageSrc: ""
},
previewImage: function() {
var that = this;
wx.previewImage({
current: that.data.imageSrc,
urls: [that.data.imageSrc],
success: function(res) {
wx.getImageInfo({
src: that.data.imageSrc,
success: function(res) {
var scale = 2;
var canvasWidth = res.width
var canvasHeight = res.height;
while (canvasWidth > 1000 || canvasHeight > 1000) {
canvasWidth = Math.round(res.width / scale)
canvasHeight = Math.round(res.height / scale)
scale++;
}
that.setData({
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
})
wx.navigateTo({
url: "../canvas/canvas?imageSrc=" + that.data.imageSrc + "&canvasWidth=" + canvasWidth + "&canvasHeight=" + canvasHeight
})
}
})
}
})
},
})
说明： 在previewImage()函数中，我们使用了wx.previewImage()API来预览画面，并获取图片的信息。如果用户点击了预览画面的确定按钮，那么我们会获取图片的本地文件路径，并使用wx.getImageInfo()API来获取图片的宽度和高度信息。我们需要根据图片的大小来自适应调整canvas的大小，并将图片的信息传递给canvas页面，进行图片裁剪。canvas页面的实现方式在下一部分进行详细说明。
3. canvas实现图片裁剪功能
3.1. canvas页面布局
我们需要在项目根目录下的pages文件夹中创建一个canvas文件夹，并在该文件夹下新建canvas.wxml、canvas.js和canvas.wxss文件。canvas.wxml的布局如下图所示：
<view class="container">
<canvas canvas-id="cropperCanvas" class="cropper-canvas" style="width: {{canvasWidth}}px; height: {{canvasHeight}}px;" />
<view class="button-group">
<button bindtap="getCropperImage">裁剪并保存</button>
<button bindtap="goBack">返回</button>
</view>
</view>
其中，canvas标签用于绘制图片，button标签用于触发裁剪事件，goBack()是返回按钮的事件处理函数。
3.2. canvas页面实现
我们需要在canvas.js文件中对canvas页面进行实现，具体实现步骤如下：
步骤一： 获取应用实例和裁剪所需参数
var app = getApp();
var imageSrc = "", canvasWidth = "", canvasHeight = "";
Page({
onReady: function() {
var that = this;
imageSrc = app.globalData.imageSrc;
canvasWidth = app.globalData.canvasWidth;
canvasHeight = app.globalData.canvasHeight;
wx.getImageInfo({
src: imageSrc,
success: function(res) {
var imageWidth = res.width;
var imageHeight = res.height;
var canvasId = "cropperCanvas";
var cropperWidth = canvasWidth - 20;
var cropperHeight = canvasHeight - 110;
var cropperLeft = (canvasWidth - cropperWidth) / 2;
var cropperTop = (canvasHeight - cropperHeight) / 2;
var imageLeft = 0, imageTop = 0;
if (cropperWidth / cropperHeight > imageWidth / imageHeight) {
var imageRealHeight = cropperWidth * imageHeight / imageWidth;
imageTop = (cropperHeight - imageRealHeight) / 2;
} else {
var imageRealWidth = cropperHeight * imageWidth / imageHeight;
imageLeft = (cropperWidth - imageRealWidth) / 2;
}
that.setData({
imageWidth: imageWidth,
imageHeight: imageHeight,
canvasWidth: canvasWidth,
canvasHeight: canvasHeight,
canvasId: canvasId,
cropperLeft: cropperLeft,
cropperTop: cropperTop,
cropperWidth: cropperWidth,
cropperHeight: cropperHeight,
imageSrc: imageSrc,
imageLeft: imageLeft,
imageTop: imageTop,
})
that.drawCropperCanvas();
}
})
}
})
说明： 上面代码中，我们获取了应用的实例、图片路径和裁剪所需参数，并通过wx.getImageInfo()API获取了图片的详细信息。接下来，我们需要根据图片的大小自适应调整canvas的大小，并根据canvas和图片的大小计算裁剪框和图片的位置信息，代码中的drawCropperCanvas()函数用于初始化canvas
步骤二： 初始化canvas
drawCropperCanvas: function() {
var that = this;
var cropperWidth = that.data.cropperWidth;
var cropperHeight = that.data.cropperHeight;
var imageWidth = that.data.imageWidth;
var imageHeight = that.data.imageHeight;
var imageLeft = that.data.imageLeft;
var imageTop = that.data.imageTop;
var canvasContext = wx.createCanvasContext(that.data.canvasId, that);
canvasContext.drawImage(imageSrc, imageLeft, imageTop, cropperWidth, cropperHeight, that.data.cropperLeft, that.data.cropperTop, cropperWidth, cropperHeight);
canvasContext.draw();
}
说明： 在drawCropperCanvas()函数中，我们通过wx.createCanvasContext() API创建了canvas的上下文环境，并使用drawImage()API在canvas中绘制了图片和裁剪框。
步骤三： 实现图片裁剪操作
我们需要为保存按钮的事件处理函数getCropperImage()编写图片裁剪的操作逻辑，具体步骤如下：
getCropperImage: function() {
var that = this;
wx.canvasToTempFilePath({
canvasId: that.data.canvasId,
success: function(res) {
that.setData({
cropperedImgUrl: res.tempFilePath
})
wx.saveImageToPhotosAlbum({
filePath: that.data.cropperedImgUrl,
success: function(res) {
wx.showToast({
title: "保存成功！",
icon: "success",
duration: 2000
})
},
fail: function(res) {
wx.showModal({
title: '提示',
content: '保存失败，请稍后重试',
showCancel: false
})
}
})
},
fail: function(res) {
wx.showModal({
title: '提示',
content: '裁剪失败，请稍后重试',
showCancel: false
})
}
})
}
说明： 在该函数中，我们首先调用wx.canvasToTempFilePath()API将canvas裁剪后的图片保存到临时文件路径中，然后使用wx.saveImageToPhotosAlbum()API将裁剪后的图片存储到手机相册中。
4. 总结
本文介绍了如何通过微信小程序API来实现图片选择和裁剪功能，包括了图片选择功能和图片裁剪功能的实现步骤。希望可以帮助想要开发微信小程序的开发者们更好地了解和应用API。如果有任何疑问，欢迎在评论区中留言，小编会及时回复大家的问题。