在小程序开发中，图片处理是一项非常重要的技术。其中，图片裁剪与添加滤镜效果是常见的需求。本文将介绍如何在小程序中实现图片裁剪与滤镜效果，并分享一些相关技巧。
图片裁剪
图片裁剪是指将原图按照指定的尺寸进行截取或缩放的操作。在小程序中，可以使用<image>标签来加载图片，然后通过样式进行裁剪。
假设有一张宽度为200px，高度为300px的图片，想要将其裁剪为宽度为100px，高度为150px的图片。可以使用如下样式：
<image src="original.jpg" style="width:100px;height:150px;"></image>
上述代码会将原图的左上角截取出100px宽度、150px高度的区域，并展示到页面上。
同时，还可以通过样式的object-fit属性来控制图片的缩放方式。例如，设置object-fit: cover可以让图片按照比例缩放至和裁剪框一样大小，并自动剪切多余的部分。
<view style="width:100px;height:150px;overflow:hidden;">
<image src="original.jpg" style="width:100%;height:100%;object-fit:cover;"></image>
</view>
滤镜效果
滤镜效果能够为图片增加一些特殊的视觉效果，如黑白化、模糊等。在小程序中，可以使用<canvas>标签来实现图片的滤镜效果。
首先，需要在页面中添加一个<canvas>标签，并给它一个id：
<canvas id="myCanvas" style="width:200px;height:300px;"></canvas>
然后，在小程序的Page中获取到该canvas的上下文，并加载图片：
Page({
onReady: function () {
const context = wx.createCanvasContext('myCanvas')
wx.getImageInfo({
src: 'original.jpg',
success: function (res) {
const width = res.width
const height = res.height
context.drawImage('original.jpg', 0, 0, width, height)
context.draw()
}
})
}
})
接下来，可以使用filter属性来设置滤镜效果。例如，设置filter: grayscale(100%)可以将图片转换为黑白效果。
Page({
onReady: function () {
const context = wx.createCanvasContext('myCanvas')
wx.getImageInfo({
src: 'original.jpg',
success: function (res) {
const width = res.width
const height = res.height
context.drawImage('original.jpg', 0, 0, width, height)
context.filter = 'grayscale(100%)'
context.draw()
}
})
}
})
通过上述代码，在canvas中加载的图片将会被转换为黑白效果。除了grayscale滤镜，小程序还支持blur、sepia、invert等多种滤镜效果，可以根据实际需求进行选择。
总结
小程序开发中的图片处理是一项重要的技术。本文介绍了如何在小程序中实现图片裁剪与滤镜效果，并提供了相关代码示例。
希望本文能对小程序开发者们在图片处理方面提供一些帮助。如果有任何问题或建议，请随时留言讨论。感谢阅读！
参考文档：
本文来自极简博客，作者：微笑向暖阳，转载请注明原文链接：小程序开发中的图片裁剪与滤镜效果实现
