精华内容
下载资源
问答
  • 小程序预览图片

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

    小程序实现预览图片:官方提供api接口 -- wx.previewImage

    官方地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.previewImage.html

    <!-- wxml -->
    <view class='itme-img-view' data-id='{{item.id}}' bindtap='previewImg'>
        <block wx:for='{{item.img}}'>
            <image src='{{item}}' mode='aspectFill' data-index='{{index}}'></image>
        </block>
    </view>

    我这里是类似于朋友圈列表那种数据格式,所以需要去找到预览图片所在的数组

    //js
    Page({
        data:{
            newsList:[]    //数据列表
        },
        previewImg:function(e){
            let id=e.currentTarget.dataset.id;
            let imgArr=[];
            for(var i=0;i<this.data.newsList.length;i++){
                if(this.data.newsList[i].id == id){    //找到图片所在的数组
                    imgArr=this.data.newsList[i].img;
                }
            }
            wx.previewImage({
                current:imgArr[e.target.dataset.index],    //当前预览的图片
                urls: imgArr    //需要预览的图片http链接列表
            })
        }
    
    })
    展开全文
  • 主要为大家详细介绍了微信小程序实现图片放大预览功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了微信小程序实现图片选择并预览,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 一.知识 二.例子 1.wxml <span xss=removed><view class=container> <image src={{image}} data-src={{image}} bindtap=previewImage></image> </view></span> 2.wxss <span
  • 本文为大家分享了微信小程序实现图片预览的具体代码,供大家参考,具体内容如下 效果图 原理 使用wx.chooseImage选择本地图片; 使用wx.previewImage预览图片。 WXML <button bindtap=previewImage type=...
  • 小程序预览图片问题

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

    预览图片报错信息是:previewImage:fail parameter error: parameter.urls[0] should be String instead of Array;

    翻译成中文的意思是参数urls[0]应该是字符串,而不是一个数组。

    文档上这样规范的:

    wx.previewImage({
        current: '', // 当前显示图片的http链接
        urls: [] // 需要预览的图片http链接列表
    })

    而我小程序项目中的urls是object的,但是问题是同样的写法,console出来的都是object的,自己的项目就报错,再次打印他们各自的格式,这才发现格式的错。

    错误的格式:

    (3) [Array(1), Array(1), Array(1)]0:   
    
    ["http://tmp/wxa555760d9b065d64.o6zAJs2LiXNRcgoKOvVJ….PzPrXyqVcOV223be89c5ce5665d08a304663360b27c3.png"]1: 
    
    ["http://tmp/wxa555760d9b065d64.o6zAJs2LiXNRcgoKOvVJ….18tSFtLEJcnV7ac12bab7cff8ab619399556e64759a4.png"]2: 
    
    ["http://tmp/wxa555760d9b065d64.o6zAJs2LiXNRcgoKOvVJ….5qwIEdwiqueMc803704bee65cb9024a3b5b898ce376b.png"]
    length: 3__proto__: Array(0)
    

    正确的格式:

    (2) ["http://tmp/wxa555760d9b065d64.o6zAJs2LiXNRcgoKOvVJ….WVFhoGidOoLT23be89c5ce5665d08a304663360b27c3.png", 
    "http://tmp/wxa555760d9b065d64.o6zAJs2LiXNRcgoKOvVJ….Bmi899jZfNFQ7ac12bab7cff8ab619399556e64759a4.png"]0: 
    "http://tmp/wxa555760d9b065d64.o6zAJs2LiXNRcgoKOvVJxQVlG7OA.WVFhoGidOoLT23be89c5ce5665d08a304663360b27c3.png"1: 
    "http://tmp/wxa555760d9b065d64.o6zAJs2LiXNRcgoKOvVJxQVlG7OA.Bmi899jZfNFQ7ac12bab7cff8ab619399556e64759a4.png"
    length: 2__proto__: Array(0)

    项目页面:

      

     

    展开全文
  • 知识二.例子,配合轮播图使用效果更佳!(如图1)1.wxmlscroll-view scroll-y="true" swiper catchtap="onSwiperTap" autoplay="auto" interval="3000" duration="500" current="{{swiperCurrent}}" bindchange .....
  • 主要为大家详细介绍了小程序实现点击图片放大预览功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 微信小程序图片预览功能

    千次阅读 2019-10-10 22:40:03
    说起小程序图片预览,不仅心力交瘁…其中不仅有我不认真阅读文档的错误,还有一些未知因素(呵呵) 新版小程序,增加了wx.previewImage,这是个API,很NB。 先看看 小程序官方文档 中是怎么说的: wx....

    说起小程序的图片预览,不仅心力交瘁…其中不仅有我不认真阅读文档的错误,还有一些未知因素(呵呵)

    新版小程序,增加了wx.previewImage,这是个API,很NB。

    先看看 小程序官方文档 中是怎么说的:

    wx.previewImage({
          current: url,
          urls: Array[]
        })
    

    准确的说:API里有两个值:urls里是个数组——里面放所有的图片http-url;current里面放上面这个urls数组里的其一图片——当前图片!
    记住,urls里放了所有的http-url !
    也就是说,微信小程序暂不支持本地图片预览功能!

    我在所做的小程序的一个页面的wxml中写下了如下代码:

    <view wx:for="{{imgArr1}}"><!-- 下面为什么可以写item,因为上面的imgArr默认自带了一个“指向每个imgArr中元素的指针”,为item,所以可以把它作为每个src的数据绑定值 -->
          <image class="aa1-2" src="{{item}}" data-index="{{index}}" bindtap="viewMoviePostImg"></image>
    </view>
    

    data- :自定义传值
    bindtap :不可向上传递的点击事件

    这就不再多说,需要注意的是这个src:src="{{item}}",明显的从data中获取“动态值”的用例! (如果js文件中写了.http,就可以从服务器获取值了)

    好,我现在js文件里是这么写的:

    data:{
        imgArr1:[
          "http://cjxnsb.cn/mxc/UCgzs/img/mxc4.png",
          "http://cjxnsb.cn/mxc/UCgzs/img/mxc2.png"
        ]
      },
      viewMoviePostImg: function (e) {
        var index = e.currentTarget.dataset.index;
        var imgArr1=this.data.imgArr1;
        wx.previewImage({
          current: imgArr1[index],
          urls: imgArr1
        })
      }
    

    第8行var index = e.currentTarget.dataset.index;可有些说道:获取当前点击事件对应元素(或说:组件)的data中数组元素的index!
    停!你怎么知道是数组元素,其实这句话显式的表达的话,在开发者工具下面,有一个APPData的栏,当你点击对应事件时,会发现那里面传进去了一个当前元素(e)的currentTarget,这里面有proty、timestart、dataset等属性,其中,点开dataset时,你会发现里面有好多图片路径,以及对应的下标。对,这就是一个数组!

    还有最重要的一点:不能通过e.事件来获取图片< image >组件的src值! 也就是说,想要这么做,只能通过把src拿到data中的方法。


    2020/6/6日更新

    最近做了一个小程序的项目,里面涉及到“发布博客”的功能,然后我才发现 —— 其实 【微信小程序不能预览本地图片】也不是绝对的:但是也差不多

    你只要把图片先提交到本地,得到一个临时路径 —— 这个路径是http协议的!
    比如:我通过wx.chooseImageAPI选择图片后其实图片们就有一个“临时路径tempFilePaths

    wx.chooseImage({
          count:max,   //图片数量(提前定好的值)
          sizeType:['original','compressed'],
          sourceType:['album','camera'],   //本地 or 拍照
          complete: (res) => {
            this.setData({
              images:this.data.images.concat(res.tempFilePaths)
            })
         }
    })
    

    将其“提取”到data中的images数组中后,如果是响应式,就可以在页面中展示出来,而且,由于tempFilePaths是协议路径,还可以预览:

    onPreviewImage(event){
        wx.previewImage({
          urls: this.data.images,
          current:event.target.dataset.imgsrc   //(从)当前点击的图片(开始预览)
        })
    },
    
    展开全文
  • 主要介绍了微信小程序实现图片上传、删除和预览功能的方法,涉及微信小程序界面布局、事件响应及图片操作相关实现技巧,需要的朋友可以参考下
  • gallery.gif数据:依赖接口wx.upload、chooseImage与preview数据请求通过LeanCloud完成图片选择:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxchooseimageobject前端处理:1.保存images数 ...
  • 本文实例为大家分享了微信小程序实现预览图片的具体代码,供大家参考,具体内容如下 先看下效果图: 这种效果在一些商城类的小程序里是很常见的一种功能,实现起来也很简单 下面我们来看一下代码: 我的这些图片...
  • 主要为大家详细介绍了小程序实现图片预览裁剪插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要介绍了微信小程序图片放大预览功能的实现方法,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 保存 预览&lt;/view&gt;   //预览 wx.previewImage({ urls: ["url","url"] //需注意 参数为数组 })   //保存 需要先下载再保存到本地 wx.downloadFile({ url: 'url', ...

    <view class='pay-con' bindtap="previewImage">保存 预览</view>

     

    //预览

    wx.previewImage({

    urls: ["url","url"]  //需注意  参数为数组

    })

     

    //保存 需要先下载再保存到本地

    wx.downloadFile({

    url: 'url',

    success: function (res) {

    console.log(res)

    wx.saveImageToPhotosAlbum({

    filePath: res.tempFilePath,

    success: function (res) {

    console.log(res)

    },

    fail: function (res) {

    console.log(res)

    console.log('fail')

    }

    })

    },

    fail: function () {

    console.log('fail')

    }

    })

    展开全文
  • 微信小程序用Canvas给图片加水印,拼接图片,制作名片PHelper-master.zip
  • 本文实例为大家分享了微信小程序图片上传放大预览的具体代码,供大家参考,具体内容如下 效果: image.js代码: Page({ //选择相册或拍照 data: { imgs: [] }, //上传图片 chooseImg: function (e) { var ...
  • 这里把预览图片功能写成一个组件来使用 1.小程序根目录新建一个component 组件目录名称命名为previewImg 直接上代码 wxml <view class="preview_box" wx:if="{{previewHideStatus}}" style="top:{{preview_box_...
  • 从本地相册选择图片或使用相机拍照。 success 返回参数说明 参数 类型 说明 tempFilePaths Array<String> 图片的本地文件路径列表 tempFiles Array<Object>、Array<File> 图片的本地文件列表,...
  • 这里介绍的是单个图片点击预览的,也可以多张,方法差不多 index.wxml <view class="page"> <view class="page__hd"> <text class="page__title">image</text> <text class="page__...
  • 小程序图片点击预览

    2020-08-31 11:49:49
    1.点击单张预览 <view class='top'> <image src="{{discount.imgPath}}" bindtap='imgYu'></image> </view> //图片点击事件 imgYu: function (event) { var that=this; var src = ...
  • 我们大概 是见过,当我们点击的图片的时候,图片会放大,然后可以左右切换查看图片 其实吧这个功能还是挺常见的 今天来说说在微信小程中实现这个功能 // index.wxml 中引入了一个图片 然后 绑定点击事件 preview <...
  • 微信小程序图片放大预览,并双击可缩小的原始比例,利用scroll-view实现
  • 微信小程序图片预览遇到的bug

    千次阅读 2018-02-03 11:23:04
    我刚刚学习java做后台,Spring框架不敢拿出来嘚瑟,只能稳稳当当用Servlet写后台,我请求后台获取我当前页面所需要的图片列表,前台接收到的数据是json数组是对象列表,然而我这里需要的图片预览是String类型的数组...
  • 小程序图片预览裁剪插件

    千次阅读 2018-02-06 15:56:58
    最近在帮工作室做一个小程序,在换背景图的时候需要预览图片,并且需要裁剪成固定的尺寸。因为小程序并不支持原生的dom操作,导致很多现有的插件都无法使用,所以花了半天专门做了一个小程序的预览裁剪插件。下面贴...
  • 主要是用到这个api ... urls: [] // 需要预览图片http链接列表 }) 页面.wxml &lt;image src="{{invoice.viewPath}}" data-url='{{invoice.viewPath}}' bindtap='showBigImg'&g...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 43,686
精华内容 17,474
关键字:

小程序预览图片