精华内容
下载资源
问答
  • uniapp预览图片预览图片列表并保存到手机 uniapp给我们提供很多现成的接口,这篇讲解一下图片预览接口 - uni.previewImage(OBJECT) 文章目录uniapp预览图片预览图片列表并保存到手机OBJECT 参数说明...

    uniapp预览图片,预览图片列表并保存到手机

    uniapp给我们提供很多现成的接口,这篇讲解一下图片预览接口 - uni.previewImage(OBJECT)


    ***话不多说,直接上干货***

    OBJECT 参数说明

    参数名 类型 必填 说明
    current String/Number 详见下方说明 详见下方说明
    urls Array 需要预览的图片链接列表
    indicator String 图片指示器样式,可取值:“default” - 底部圆点指示器; “number” - 顶部数字指示器; “none” - 不显示指示器。
    loop Boolean 是否可循环预览,默认值为 false
    longPressActions Object 长按图片显示操作菜单,如不填默认为保存相册
    success Function 接口调用成功的回调函数
    fail Function 接口调用失败的回调函数
    complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

    longPressActions 参数说明

    参数 类型 必填 说明
    itemList Array 按钮的文字数组
    itemColor String 按钮的文字颜色,字符串格式,默认为"#000000"
    success Function 接口调用成功的回调函数,详见返回参数说明
    fail Function 接口调用失败的回调函数
    complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

    success 返回参数说明

    参数 类型 说明
    index Number 用户长按图片的索引值
    tapIndex Number 用户点击按钮列表的索引值

    实例:

    以下为上传图片并在页面中显示,点击图片预览图片的案例,
    上传图片还不熟悉的小伙伴可以看:https://blog.csdn.net/qq_45495857/article/details/108219704这篇博客

    <template>
    	<view class="content">
    		<image src="../../static/logo.png" @click="uploadImg" mode=""></image>
    		-------------------------------------
    		<image @click="preview(index)" v-for="(item,index) in imgArr" :src="item">
    			
    		</image>
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				imgArr:[]
    			}
    		},
    		onLoad() {
    
    		},
    		methods: {
    			uploadImg(){
    				let that = this
    				uni.chooseImage({
    					success(res) {
    						console.log(res.tempFilePaths)
    						that.imgArr = res.tempFilePaths;
    						console.log(that.imgArr)
    						}
    				})
    			},
    			preview(index){
    				let that = this
    				uni.previewImage({
    					current:index,
    					urls:that.imgArr
    				})
    			}
    		}
    	}
    </script>
    

    //希望以上内容可以帮助到大家

    展开全文
  • uniapp预览图片

    2020-12-16 15:57:27
    就用到了 uniapp 预览图片的功能:uni.previewImage(OBJECT) 二、使用 html <view class="img-c" v-show="item.pictureUrl"> <image class="img" v-for="(itemImg, imgIndex) in item.pictureUrl" :...

    一、需求

    最近有一个留言板需求,留言之后需要展示留言信息,信息里面除了文字还有图片。
    点击图片,可预览图片。就用到了 uniapp 预览图片的功能:uni.previewImage(OBJECT)
    

    二、使用

    html

    <view class="img-c" v-show="item.pictureUrl">
    	<image class="img" 
    		v-for="(itemImg, imgIndex) in item.pictureUrl"
    		:key="imgIndex"
    		mode='widthFix'
    		@tap.stop="onPreviewImageClick(item.pictureUrl)"
    		:src="picIp + itemImg.address + picFileName + itemImg.fileName">
    	</image>
    </view>
    
    
    		// 预览图片
    		onPreviewImageClick(image) {
    			let imgArr = []
    			image.forEach(item => {
    				imgArr.push(this.picIp + item.address + this.picFileName + item.fileName)
    			})
    			//预览图片
    			uni.previewImage({
    				urls: imgArr
    			})
    		},
    

    在这里插入图片描述
    在这里插入图片描述

    展开全文
  • layui 预览图片

    千次阅读 2019-05-21 15:37:16
    预览图片显示原始大小 function previewImg(obj) { var img = new Image(); img.src = obj.src; var height = img.height + 50; //获取图片高度 var width = img.width; //获取图片宽度 va...

    预览图片显示原始大小

        function previewImg(obj) {
            var img = new Image();  
            img.src = obj.src;
            var height = img.height + 50; //获取图片高度
            var width = img.width; //获取图片宽度
            var imgHtml = "<img src='" + obj.src + "' />";  
            //弹出层
            layer.open({  
                type: 1,  
                shade: 0.8,
                offset: 'auto',
                area: [width + 'px',height+'px'],
                shadeClose:true,//点击外围关闭弹窗
                scrollbar: false,//不现实滚动条
                title: "图片预览", //不显示标题  
                content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
                cancel: function () {  
                    //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });  
                }  
            }); 
        }

    固定预览图片大小 500 * 500

        function previewImg(obj) {
            var img = new Image();  
            img.src = obj.src;
            var imgHtml = "<img src='" + obj.src + "' width='500px' height='500px'/>";  
            //弹出层
            layer.open({  
                type: 1,  
                shade: 0.8,
                offset: 'auto',
                area: [500 + 'px',550+'px'],
                shadeClose:true,
                scrollbar: false,
                title: "图片预览", //不显示标题  
                content: imgHtml, //捕获的元素,注意:最好该指定的元素要存放在body最外层,否则可能被其它的相对元素所影响  
                cancel: function () {  
                    //layer.msg('捕获就是从页面已经存在的元素上,包裹layer的结构', { time: 5000, icon: 6 });  
                }  
            }); 
        }
     

     <img src="..." alt="..." width="200px" height="200px" class="layui-upload-img" οnclick="previewImg(this)">
     

    展开全文
  • uniapp点击预览图片

    千次阅读 2020-06-12 14:09:07
    photoClick(index) { let arr = []; arr.push(this.root... urls: arr //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以 }); } this.rootUrl :服务器地址 this.dataList[index].ImgP
    photoClick(index) {
    	let arr = [];
    	arr.push(this.rootUrl + this.dataList[index].ImgPath);
    	//uniapp预览图片
    	uni.previewImage({
    		current: index, //预览图片的下标
    		urls: arr //预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以
    	});
    }
    

    this.rootUrl :服务器地址
    this.dataList[index].ImgPath :点击某个图片传过来的地址

    特别注意预览图片的地址,必须要数组形式,如果不是数组形式就转换成数组形式就可以

    展开全文
  • 上传图片预览图片方向错误

    千次阅读 2018-02-06 08:32:55
    上传图片预览图片方向错误 问题描述 ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 解决方案 获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。 利用...
  • uni-app点击预览图片

    万次阅读 2020-01-13 21:57:46
    <image :src="info.shopLogoUrl" @tap="_previewImage(info.shopLogoUrl)" mode="widthFix" > _previewImage(image) { var imgArr = [];... //预览图片 uni.previewImage({...
  • Vue vant 使用 ImagePreview 预览图片

    千次阅读 2020-07-03 11:07:40
    Vue vant 使用 ImagePreview 预览图片 场景1 编列数组生成图片,点击预览图片 <div class="zoom" v-for="(item, index) in listData" v-show="item" :key="index" > <img v-if="item" class="img
  • vue项目elementUI预览图片

    千次阅读 2020-12-15 13:32:13
    vue项目elementUI预览图片 说明: 1,elementUI组件中已经实现了图片预览,点击图片会有预览的功能 2,需求产品需求,要不展示图片,点击“图片预览按钮或链接”才显示图片的预览功能,如下图所示 如上图所示,...
  • 小程序预览图片

    千次阅读 2018-12-29 18:15:40
    小程序实现预览图片:官方提供api接口 -- wx.previewImage 官方地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html &lt;!-- wxml --&gt; &lt;view class='itme-img-...
  • 用QLPreviewController预览图片视频

    千次阅读 2015-10-26 14:35:42
    在IM项目中,要对接收到的文件进行预览,用QLPreviewController可以预览图片视频等文件。
  • 移动端查看预览图片放大缩小

    千次阅读 2019-03-23 10:11:38
    方法一 之前介绍过一款 移动端vue适用的插件大全。...采用微信自带的点击查看预览图片,并且放大缩小 实现方法: 1.先在全局引入 微信的js <script type="text/JavaScript" src="http://res.wx.qq.com/...
  • 微信小程序实现弹窗预览图片

    万次阅读 2018-04-03 23:58:24
    用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章微信小程序之第三方UI框架 zanui 使用教程有一个商品点击图片一个弹窗的效果实现预览图片wxml代码首先是图片的代码&lt;image src="{{...
  • excel图片放大预览 在Excel中预览图片问题 (Preview Picture Problems in Excel) In the good old days of Excel, you could change a workbook setting, and see a preview picture of the file contents, before ...
  • element通过按钮点击预览图片

    千次阅读 2020-06-16 14:14:52
    有一个需求是通过按钮点击预览图片。如图: 但是element图片预览组件没有提供按钮点击预览功能接口,只能点击图片实现。 解决办法: 翻看了Image的源码,发现大图预览是一个小组件image-viewer,打开看看它的props...
  • uview实现点击预览图片效果

    千次阅读 2020-11-07 14:43:23
    1、在页面的图片上添加点击... 2、方法: //预览图片 imgListPreview(){ var urlList = [] urlList.push(this.userInfo.avatar) //push中的参数为 :src="item.img_url" 中的图片地址 uni.previewImage({ ...
  • // 预览图片单张 previewImg(logourl) { let _this = this; let imgsArray = []; imgsArray[0] = logourl uni.previewImage({ current: 0, urls: imgsArray }); }, // 预览...
  • 小程序预览图片问题

    千次阅读 2019-04-16 14:55:39
    预览图片报错信息是:previewImage:fail parameter error: parameter.urls[0] should be String instead of Array; 翻译成中文的意思是参数urls[0]应该是字符串,而不是一个数组。 文档上这样规范的: wx....
  • js本地预览图片和转base64

    千次阅读 2017-05-05 13:57:08
    js本地预览图片和转base64
  • 另一种思路是,直接在本地内存中预览图片,用户确认提交后再上传至服务器保存。 这两种方法各有利弊,方法一很明显,浪费流量和服务器资源;方法二则加重了浏览器的负担,并且对浏览器的兼容性要求更高(在某些低...
  • 在微信h5富文本中预览图片

    千次阅读 2019-02-13 11:34:13
    在微信h5中,点击图片是不能直接预览图片的,那么如何在后台返回的富文本中点击img预览图片呢? 1.拿到后台返回的富文本数据,通过正则取出所有img标签里的src并存到新的数组里 以下代码写在ajax成功的回调函数里 ...
  • 使用微信内置浏览器预览图片

    千次阅读 2017-05-24 11:07:18
    在微信H5开发中预览图片,可以使用其他的一些图片预览插件,但是这样却不能把其中的某张图片发送给好友。对于 这种情况可以使用微信内置浏览器图片预览功能,就可以解决这个问题。不说废话直接看代码:
  • APICloud(三):预览图片

    千次阅读 2017-04-21 15:38:00
    上一篇说的选择图片,且显示图片的img标签的父级A标签每个都添加了onclick事件previewThePic,该事件用来预览图片。且所有的A标签都添加在picList的div中。(PS:先说好层级关系,代码中获取img的src就不会晕了) ...
  • jQuery实现input file选择图片后,可以预览图片的效果HTML代码:&lt;div&gt;  &lt;img src="" id="imgs"&gt; &lt;/div&gt; &lt;input type="file" id...
  • 我们都知道 upload 是上传文件的组件,但同时可以对上传文件进行预览,这里我才用 upload 预览图片。 首先介绍的是list-type:文件列表的类型,可选值:text | picture | picture-card ,默认值为 text. file-list...
  • 1.预览图片用到了uniapp提供的previewImage uni.previewImage({ urls: this.list[index].pics, //预览的图片数组 current: this.list[index].pics[i], //点击预览时,显示的那一张图片 longPressActions: { ...
  • 使用element ui实现点击按钮预览图片

    千次阅读 2021-02-26 11:29:30
    看官方文档大图预览的previewSrcList感觉...原文链接:element UI自带的图片预览插件,实现点击按钮预览图片列表 el-image-viewer 真是guud!如果本文对你有些许帮助,动动手指点个赞吧(记得给原博主也点一个哟),你
  • handleHtml($event) 利用冒泡事件实现的 设置 深度选择器设置 img 最大宽度100% 写的公共预览图片的方法 通过import 导入 写的公共预览图片的方法
  • js上传图片前预览图片,检测上传图片大小,检测上传文件大小 js图片上传预览,上传文件大小 // 预览图片 function previewImg(file, imgId){ if(file.value==""){ return; } var img = document...
  • ftp如何预览图片 解决方案

    千次阅读 2016-05-13 12:04:00
    下载使用 server-U ,开启 HTTP 服务,输入 http://ip:端口 后,...本来想走 windows 文件共享服务预览图片,可是 貌似 被防火墙拦截了445 137 138 端口,难道 windows 跨局域网 无法使用文件共享服务?     ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 157,312
精华内容 62,924
关键字:

预览图片