uniapp开发微信小程序之上传图片的裁剪
目录
uniapp开发微信小程序之上传图片的裁剪
开发需求：上传图片时将图片裁剪成统一的大小。
其实这种就像微信头像那样，选定图片或拍摄好图片，拖动裁剪框，将图片裁剪成自己需要的大小。这里介绍一下所用的插件：
首先在hbuilder插件市场下载插件，下载之后，插件所在的位置如图所示。
然后将components复制出来，如果是tabbar页面中引用，就放在根目录下；若是非tabbar页面就放到分包中，可以少占用主包的内存。
这个插件直接引用的话，在引用页面就直接展示的是裁剪框，点击裁剪框的选择图片按钮，才会调用相机/相册，选择图片。这和我要的效果有点出入，我要的效果是，在页面中点击按钮，调起相机/相册，然后再裁剪。这里就需要改造一下，在插件的Vue文件中写了一个插槽，给 class = " image-cropper " 样式里加一个 z-index，代码如下：
<view @click="chooseImage" class="slot-info">
<slot></slot>
</view>
最后页面中引用
<template>
<view>
<qf-image-cropper :width="winWidth" :height="winWidth" @crop="handleCrop">
<!-- 这里放的就是插槽内容，图片、按钮等都可 -->
<button>点我</button>
</qf-image-cropper>
<image :src="tempFilePath"></image>
</view>
</template>
<script>
import QfImageCropper from '@/components/qf-image-cropper/qf-image-cropper.vue';
export default {
components: {
QfImageCropper
},
data() {
const system = uni.getSystemInfoSync();
const width = system.screenWidth;
const height = system.screenHeight;
return {
tempFilePath: "",
winWidth: width > height ? height : width
}
},
methods: {
handleCrop(e) {
// 裁剪后图片的本地地址
this.tempFilePath = e.tempFilePath;
}
}
}
</script>
<style>
</style>使用效果图：
附上插件的地址：https://ext.dcloud.net.cn/plugin?id=10333