uniapp点击图片放大_想要放大镜将图片放大的效果?你只需这么做即可!

【每天楞一点】的第 46 个知识

af83bec12138114971afd1374fad3e3f.png

效果图:

5598e88a34df8a4c8c4b077be53d0031.png

8257b0c4f7cfae541c07f3a647b58a36.png

在PicsArt中打开图片,点击【工具】——【图形剪辑】。 869a7e19017e0fb723a521d46250e2de.png

选择圆形,通过缩放双指,将其大小调整至合适。

完事后,点击右上角的箭头。

将边框颜色设置为黑色,并调整圆形边框的尺寸至合适大小。

然后点击右上角的【保存】,即可将图片保存至贴纸,待用。

补充:

边框也可以设置为其他颜色,但是个人感觉黑色更像个放大镜的效果。

至于边框尺寸,我这里设置的是5,你们看着办。

b727c9b33ee0054a5e5d2d67038d81b7.png 再一次打开原图,点击贴纸,将刚刚保存的贴纸添加到图片上。 然后调整将贴纸调至合适的位置和大小即可。 12b8ef6508fd1e5df173c2ce2b401f5a.png 点击图片可放大查看 然后就又到了保存图片到手机的老操作了: 点击右上角的【应用】——【下一步】——【保存】——【下载图片】,就可以保存图片啦~

f153a696334ad49163e4b69000889c1e.png

d42eb8c1aaf2a1f3c0a34aea3cfcb683.png

5598e88a34df8a4c8c4b077be53d0031.png 如果想要这种放大镜效果图:

8257b0c4f7cfae541c07f3a647b58a36.png

将底图模糊,在添加贴纸之前,点击【添加图片】或者【贴纸】,将放大镜放置在图片上合适的位置。

然后添加图片或贴纸,然后根据情况调整,让它们更贴合就行啦~

一般需要用到【橡皮擦】工具~

部分图片来源于PicsArt免费素材库

怎么样

用PicsArt做放大镜效果

是不是很简单?

05cb74f055ae53e1fe7269ebf21b1e1b.png

更多PicsArt教程

1.麻麻!她的手机锁屏壁纸里不仅有吃的,还有帅哥! 2.Picsart美易教程| 人物线条涂鸦,一键搞定! 3.手机怎么做镂空文字效果?教程简单的不能再简单了! 4.Picsart教程之剪影贴纸 | 凭实力抠出来的图,想怎么用就怎么用。 5.没有PS印章不要慌,Picsart的克隆已上场! 6.只要3步,手机就能做出“飞一般”的动感效果! 9beb807001c3aba93e3df2ae69163844.gif

293933db53d4341d5072206a7760c7d8.gif

Uniapp中,想要实现点击图片放大效果,可以通过以下步骤实现: 1. 在页面中引入放大图片,并添加一个点击事件。 2. 在事件的回调函数中,使用uniapp提供的API将点击图片路径传递给一个全屏显示的页面。 3. 在全屏显示的页面中,通过获取传递过来的图片路径,在页面上显示大图。 4. 添加一个点击事件,当用户点击图片的时候,关闭全屏显示的页面,回到原来的页面。 具体步骤如下: 1. 在放大图片所在的页面中添加如下代码: ```html <template> <view> <image @click="showFullScreenImage" src="path/to/image.png"></image> </view> </template> ``` 2. 在 methods 中添加 showFullScreenImage 方法: ```javascript methods: { showFullScreenImage() { uni.navigateTo({ url: '/pages/fullScreenImage?imagePath=path/to/image.png' //将图片路径作为参数传递给全屏显示的页面 }) } } ``` 3. 在全屏显示的页面 fullScreenImage 中添加如下代码: ```html <template> <view> <image @click="closeFullScreenImage" :src="imagePath"></image> </view> </template> ``` 4. 在 methods 中添加 closeFullScreenImage 方法: ```javascript methods: { closeFullScreenImage() { uni.navigateBack() //关闭全屏显示的页面,返回原来的页面 } }, mounted() { this.imagePath = this.$route.query.imagePath //在页面加载时获取传递过来的图片路径 } ``` 通过以上步骤,当用户点击图片时会打开全屏显示的页面,显示原始大小的图片。当用户点击全屏图片时,会关闭全屏显示的页面,回到原来的页面。这样就实现了点击图片放大效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值