uni-app通过uni.previewImage实现在线预览图片

1 篇文章 0 订阅
1 篇文章 0 订阅

问题还原:

在项目开发中,用户上传完图片后,在展示区域想要预览图片,所以需要实现图片的在线预览功能。那么如何实现那?

解决方案:

**使用uni-app自带的uni.previewImage({current: 0, urls: url})即可实现图片的在线预览功能。**需要注意的是其中urls是图片路径数组。具体代码如下所示:
界面代码如下所示:

<text class="value"><a @tap="imgView(item.imgName, item.imgPath)" style="color: blue;">{{item.imgName}}</a></text> 

JS代码如下所示:

methods: {
			//图片预览
			imgView(imgName, imgPath) {
				if(imgName &&imgPath) {
					const imgTypeArr = ["bmp","jpg","png","tif","gif","pcx","tga","exif","fpx","svg","psd","cdr","pcd","dxf","ufo","eps","ai","raw","WMF","webp","avif","apng"];
					const lastIndex = imgName.lastIndexOf(".");
					const imgType = imgName.substring(lastIndex + 1, imgName.length);
					if(imgTypeArr.includes(imgType)) {
						var imgPaths = [];
						imgPaths.push(imgPath);//注:这里是图片的全路径,直接浏览器访问可以展示的那种。
						uni.previewImage({
							current: 0,
							urls: imgPaths,//图片路径是个数组,数组里面放图片的全路径
							longPressActions: {  //长按保存图片到相册
								itemList: ['保存图片'],
								success: (data)=> {
									uni.saveImageToPhotosAlbum({ //保存图片到相册
										filePath: payUrl,
										success: function () {
											uni.showToast({icon:'success',title:'保存成功'})
										},
										fail: (err) => {
											uni.showToast({icon:'none',title:'保存失败,请重新尝试'})
										}
									});
								},
								fail: (err)=> {
									console.log(err.errMsg);
								}
						}
						})
					}else {
						uni.showToast({
							icon: 'none',
							title: '只能预览图片!'
						});
					}
				}
			}
		}

注:笔者在代码中判断了下文件格式是不是图片。

PS:欢迎大家点赞、关注、支持。如有需要,欢迎添加博主QQ沟通交流!QQ:156587607

uniApp中,`uni.previewImage` 是用于显示图片的组件,它本身并不直接支持添加白色背景。但是你可以通过在外部创建一个自定义的预览页面,并在其中手动添加图片以及白色背景来实现这个效果。 下面是一个简单的步骤示例: 1. 首先,在你的项目中创建一个新的 Vue 组件,比如 `CustomPreview.vue`,并设置其模板结构: ```html <template> <view class="preview-container"> <image :src="currentImage" mode="cover" class="preview-image"></image> <view class="preview-background white-bg"> <!-- 白色背景 --> <text class="preview-text">{{ imageUrl }}</text> </view> </view> </template> <style scoped> .preview-container { position: relative; } .preview-image { width: 100%; height: auto; } .white-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; /* 设置背景颜色 */ } </style> ``` 2. 然后在你的 JavaScript 中使用 `uni.previewImage` 的回调函数来传递图片数据,并更新 `currentImage` 变量: ```javascript export default { data() { return { imageUrl: '', currentImage: '' }; }, methods: { handlePreview(image) { this.imageUrl = image.src; this.currentImage = 'path/to/image'; // 调用 previewImage 组件 uni.previewImage({ urls: [this.currentImage], // 图片路径数组 success: () => {}, // 成功回调 fail: () => {} // 失败回调 }); } } }; ``` 3. 当需要预览图片时,通过调用 `handlePreview` 方法,并传入图片数据。 这样,你就实现了在预览图片时添加一个白色的背景。如果你想保持预览的原生体验,那么可能需要用户在实际应用内操作,例如长按图片选择显示模式。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值