UniApp实现图片裁剪与滤镜效果的实现技巧
UniApp是一个基于Vue.js开发多端应用的框架，它能够帮助开发者快速地开发出同时支持多个平台的应用。在实际开发中，常常需要对图片进行一些处理，例如裁剪、滤镜等，那么在UniApp中如何实现呢？下面我们就通过一些实例来学习UniApp中图片裁剪与滤镜效果的实现技巧。
图片裁剪
在实际开发中，经常需要对图片进行裁剪，例如用户上传的头像需要进行调整，这时候我们可以使用uni-app提供的一个组件来实现图片的裁剪，这个组件叫作uni-image-cropper。下面我们就来看一下如何使用这个组件。
首先，我们需要在页面中引入uni-image-cropper组件。代码如下：
<template>
<view class="container">
<uni-image-cropper ref="uniImageCropper" :src="src" :mode="mode" :data="data" :size="size" :disable="disable" :quality="quality" @get-image="getImage" @fail="fail" />
<view class="button-area">
<button class="btn" type="default" @click="chooseImage">选择图片</button>
<button class="btn" type="primary" @click="cropperImage">裁剪图片</button>
<button class="btn" type="warn" @click="resetImage">重置</button>
</view>
</view>
</template>
<script>
import uniImageCropper from '@/components/uni-image-cropper/uni-image-cropper.vue'
export default {
components: { uniImageCropper },
data() {
return {
src: '',
mode: 'rectangle', //cropping box shape, can be 'rectangle' or 'circle'
data: {},
size: {
width: 750,
height: 750
},
quality: 1.0,
disable: false
}
},
methods: {
chooseImage() {
uni.chooseImage({
count: 1,
success: (res) => {
this.src = res.tempFilePaths[0]
}
})
},
cropperImage() {
this.$refs.uniImageCropper.open()
},
getImage(e) {
console.log(e.detail.path)
},
resetImage() {
this.$refs.uniImageCropper.reset()
},
fail(e) {
console.log(e.detail.errMsg)
}
}
}
</script>
上面的代码中，我们引入了uni-image-cropper组件，并在页面中使用了它。关于uni-image-cropper组件的具体属性说明，可以在官方文档中查看（https://uniapp.dcloud.io/component/uni-image-cropper）。
然后，我们需要在methods中添加几个方法，这几个方法分别用于选择图片、打开裁剪器、获取裁剪后的图片、重置裁剪器等操作。代码如下：
methods: {
chooseImage() {
uni.chooseImage({
count: 1,
success: (res) => {
this.src = res.tempFilePaths[0]
}
})
},
cropperImage() {
this.$refs.uniImageCropper.open()
},
getImage(e) {
console.log(e.detail.path)
},
resetImage() {
this.$refs.uniImageCropper.reset()
},
fail(e) {
console.log(e.detail.errMsg)
}
}
最后，在页面中添加一些按钮，用于选择图片、打开裁剪器、重置裁剪器等操作。代码如下：
<button class="btn" type="default" @click="chooseImage">选择图片</button>
<button class="btn" type="primary" @click="cropperImage">裁剪图片</button>
<button class="btn" type="warn" @click="resetImage">重置</button>
上面的代码中，我们使用了三个按钮，分别用于选择图片、打开裁剪器、重置裁剪器等操作。
通过上面的代码，我们就可以在UniApp中实现图片的裁剪功能了。通过这个例子，我们可以看到，在UniApp中实现图片裁剪功能非常简单，只需要引入uni-image-cropper组件，并实现一些简单的方法即可。
滤镜效果
除了图片裁剪之外，我们还可以给图片添加一些滤镜效果，例如怀旧滤镜、模糊滤镜等。下面我们就通过一些实例来学习UniApp中图片滤镜效果的实现技巧。
首先，我们需要使用canvas来实现图片滤镜效果。使用canvas的好处是可以让我们很方便地使用各种滤镜效果，并且还可以实现更加复杂的效果。下面是一个简单的例子，演示了如何使用canvas实现怀旧滤镜：
<template>
<canvas ref="myCanvas" style="width: 100%; height: 100vh;" />
</template>
<script>
export default {
onReady() {
//获取canvas画布
let ctx = uni.createCanvasContext('myCanvas', this)
//加载图片
uni.getImageInfo({
src: 'https://img01.yzcdn.cn/vant/cat.jpeg',
success: (res) => {
//绘制图片
ctx.drawImage(res.path, 0, 0, 600, 400)
//获取图片数据
let imgData = ctx.getImageData(0, 0, 600, 400)
//循环遍历每个像素，实现怀旧效果
for (let i = 0; i < imgData.data.length; i += 4) {
let r = imgData.data[i]
let g = imgData.data[i + 1]
let b = imgData.data[i + 2]
imgData.data[i] = (r * 0.393) + (g * 0.769) + (b * 0.189)
imgData.data[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168)
imgData.data[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131)
}
//将处理后的数据放回画布
ctx.putImageData(imgData, 0, 0)
//画布绘制完成后，将canvas存到临时文件中，方便保存图片
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: (res) => {
console.log(res.tempFilePath)
}
}, this)
})
}
})
}
}
</script>
上面的代码中，我们使用了canvas来实现怀旧滤镜效果，首先加载了一张图片并绘制到画布上，然后遍历画布的每个像素，对像素进行处理得到怀旧效果，并将处理后的数据放回画布。
通过上面的例子，我们可以看到，使用canvas实现图片滤镜效果非常方便，只需要遍历每个像素，对像素进行处理即可。UniApp也提供了很多实用的工具类和组件，使得开发图片滤镜效果变得更加简单。
总结
通过上面的学习，我们了解到了如何在UniApp中实现图片裁剪和滤镜效果。在实际开发中，我们可以根据需要使用不同的方法，例如使用uni-image-cropper组件进行图片裁剪，使用canvas实现各种滤镜效果。相信通过学习这些实用的技巧，我们可以在UniApp中轻松地开发出更加丰富多彩的图片处理应用。