uniapp图片(头像)裁剪(vue3+ksp-cropper)

继上篇文章发布不到一天,有一定的反响,于是准备提笔写下h5的头像裁剪,也是前段时间产品的一个小功能,h5相对于pc的头像裁剪简单很多,不需要去转换一些文件格式,好了,准备开始吧!

使用uniapp自带的上传组件

<view class="header_img mt-32">
	<uni-file-picker class="img" limit="1" v-model="avatarList" fileMediatype="image" mode="grid"
				@select="upload" />
</view>

将插件安装到项目中,这个下载插件的官方地址https://ext.dcloud.net.cn/plugin?id=6878

我记得应该是需要手机扫码看30秒的广告才可以下载的哈哈哈

参数根据自己的需求可以自己设置,头像裁剪记得用fixed,这个是固定尺寸

下载完了之后就将代码加进项目中

<!-- 图片裁剪 -->
<ksp-cropper mode="fixed" :width="250" :height="250" :maxWidth="1024" :maxHeight="1024" :url="cropperUrl"
		@cancel="oncancel" @ok="onok"></ksp-cropper>

数据层,标签里面的  :url如果为空插件就默认不显示,有地址裁剪就会自己出来

const cropperUrl = ref('')

现在开始处理逻辑

当我们使用uniapp自带的上传图片时将cropperUrl进行赋值,头像裁剪就会出来

赋值完成后操作后点击确认onok进行裁剪,将cropperUrl置空,去调用上传的接口得到完整的地址,成功得到完整地址后再去调用修改图片(头像)地址即可。

// 选择图片
const upload = (e) => {
		const tempFilePaths = e.tempFilePaths; //e是获取的图片源
		cropperUrl.value = tempFilePaths[0]
	}

// 确认裁剪
const onok = (res) => {
		cropperUrl.value = ""
		uni.uploadFile({
			url: `/apis/set/upload`,
			filePath: res.base64,
			//设置请求头
			header: {
				"token": getToken()
			},
			name: 'file',
			success: res2 => {
				let data = JSON.parse(res2.data)
				if (data.code == 1) {
					// url为上传的地址
					saveAvatar({
						avatar: data.data.fullurl
					}).then(res3 => {
						if (res3.code == 1) {
							successMessage()
						} else {
							uni.showToast({
								title: res3.msg,
								icon: 'none'
							})
						}
					})
				}

			}
		})
	};

// 取消裁剪
const oncancel = (res) => {
		cropperUrl.value = "";
	};

以上就是完整的处理逻辑以及代码

完结,撒花,有任何问题请私信踢我或者评论区留言!!!!!!!!!

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue3 TypeScript Vue-Cropper是一个基于Vue3和TypeScript开发的图片裁剪组件,使用了vue-cropper库。它主要依赖于element-plus作为UI组件库。在代码地址https://gitee.com/zhong-wenkai/cropper-image-upload.git中,有三个文件夹:cropper-image-upload2.x、cropper-image-upload3.x和cropper-image-upload3.x ts。cropper-image-upload2.x是基于Vue2.x版本,依赖于element-ui;cropper-image-upload3.x是基于Vue3.x版本,依赖于element-plus;cropper-image-upload3.x ts是基于Vue3.x TypeScript版本,同样也依赖于element-plus。需要注意的是,对于Vue3.x版本的vue-cropper库,必须安装vue-cropper@next版本。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [基于 vue-cropper 库 实现的 图片裁剪组件(含vue2.x/vue3.x/vue3.x+ts 写法)](https://blog.csdn.net/qq_41709082/article/details/123094853)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue-cropper 使用demo。 基于 vue3,实现 旋转,缩放,控制裁剪,选择阈值,上传图片等功能。](https://download.csdn.net/download/qq_32067561/84998465)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

 冰紫露恋蝶玛丽红红秃头宝贝

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值