小程序中图片点击预览、长按转发、保存、识别图中二维码

爱被打了一巴掌 2022-06-01 02:11 400阅读 0赞

随着小程序的发展微信小程序中为了更加方便用户体验，在小程序中添加图片预览、长按转发、保存、收藏、识别图中二维码等

![SouthEast][]

![SouthEast 1][]

![SouthEast 2][]

前端代码：

<view wx:for="{
       {imgalist}}"wx:for-item="image"class="previewimg">  
      <image src="{
       {image}}" data-src="{
       {image}}" bindtap="previewImage" class='img'></image>  
    </view>

js代码：data中imglist可以存放多张图片，进行渲染

data: {
        imgalist: ['https://www.cslpyx.com/weiH5/jrx.jpg', 'https://www.cslpyx.com/weiH5/mmd.jpg'],
      },

预览、分享、保存、识别代码：

previewImage: function (e) {
        wx.previewImage({
          current: this.data.imgalist, // 当前显示图片的http链接   
          urls: this.data.imgalist // 需要预览的图片http链接列表   
        })  
        wx.getImageInfo({// 获取图片信息（此处可不要）
          src: 'https://www.cslpyx.com/weiH5/jrkj.jpg',
          success: function (res) {
            console.log(res.width)
            console.log(res.height)
          }
        })
        
      }

[SouthEast]: /images/20220601/e5adf785b4dd420b920b5f83b8846627.png
[SouthEast 1]: /images/20220601/2d4192c5c8a14dfdb5e1c1e0929e450a.png
[SouthEast 2]: /images/20220601/23754b46d42c4630946e860a80091820.png

发表评论取消回复

表情：

评论列表（有 0 条评论，400人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序中长按识别二维码

背景项目中遇到要使用图片预览扫描二维码这种情况，但是突然发现不能使用了，搜索了一波发现有使用条件使用条件一、image标签 + show-menu-by-

爱被打了一巴掌/ 2023年10月09日 15:12/ 0 赞/ 36 阅读

相关微信小程序点击单个图片进行预览图片，点击预览pdf文件

这里介绍的是单个图片点击预览的，也可以多张，方法差不多 index.wxml <view class="page"> <view class="pag

待我称王封你为后i/ 2022年12月10日 08:55/ 0 赞/ 822 阅读

相关小程序长按保存图片

<image mode="widthFix" bindlongtap="longPressSaveImg" data-url="{ {data}}" cl

爱被打了一巴掌/ 2022年09月04日 15:57/ 0 赞/ 372 阅读

相关小程序中图片点击预览、长按转发、保存、识别图中二维码

随着小程序的发展微信小程序中为了更加方便用户体验，在小程序中添加图片预览、长按转发、保存、收藏、识别图中二维码等 ![SouthEast][] ![SouthEast 1]

爱被打了一巴掌/ 2022年06月01日 02:11/ 0 赞/ 401 阅读

相关微信小程序canva生成图片，长按图片识别小程序二维码详解

下面这个图片就是通过图片和文字等内容合成的一张带有微信小程序二维码的图片，在小程序内部长按可以识别出来： ![这里写图片描述][70] 基本思路是先将内容用canvas排

谁借莪１个温暖的怀抱￠/ 2022年05月25日 06:18/ 0 赞/ 1031 阅读

相关 android点击查看大图（长按保存图片）

通常会看到点击ImageView弹出一个Dialog上面有一张大图，然后长按大图可以保存，这就好像成为了一个固定的流程，那么，我们就来实现这一系列的功能。 1.xml文件

分手后的思念是犯贱/ 2022年05月19日 09:38/ 0 赞/ 620 阅读

相关小程序中图片点击预览、长按转发、保存、识别图中二维码

<view wx:for="{ {imgalist}}"wx:for-item="image"class="previewimg"> <i

缺乏、安全感/ 2022年05月09日 04:33/ 0 赞/ 355 阅读

相关微信小程序：点击图片预览

做微信小程序的时候使用的图片大小不尽相同，为了让使用者能够浏览原图，就需要给图片添加点击预览的功能，下面我详细介绍一下实现步骤，首先介绍微信小程序文档中的使用教程： ![

妖狐艹你老母/ 2022年04月03日 03:14/ 0 赞/ 674 阅读

相关小程序二维码--保存图片

// 保存海报 postSave(e) { wx.showLoading({ title: '保存中...'

小鱼儿/ 2021年11月24日 01:56/ 5 赞/ 427 阅读

相关微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

小程序目前只支持扫小程序码，普通二维码可以保存图片到本地回到微信中识别识别二维码没有其他办法只能看官方后期怎么更新 ![Center][]![Cente

比眉伴天荒/ 2021年09月30日 04:36/ 0 赞/ 697 阅读