小程序中使用wx.previewImage实现图片预览与缩放

这篇具有很好参考价值的文章主要介绍了小程序中使用wx.previewImage实现图片预览与缩放。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在小程序文档中我们可以看到wx.previewImage的功能是在新页面中全屏预览图片,预览的过程中用户可以进行保存图片、发送给朋友等操作。但其实还有一个隐藏功能缩放图片,最小为原比例。话不多说,上代码:
xml代码:

<view class="container">
  <image class="img" src="/assets/images/longpress-image-scan/wx-qr-code.jpg" data-src="/assets/images/longpress-image-scan/wx-qr-code.jpg" bind:tap="previewImage" mode="widthFix" />
</view>

src的路径换成自己的图片路径就可以了,可以是像上面一样的本地图片路径,也可以是线上图片链接。
js代码:

Page({
  /**
   * 预览图片
   * @param {*} e 
   */
  previewImage(e){
    const {src:imgSrc} = e.currentTarget.dataset
    console.log(imgSrc);
    wx.previewImage({
      current: imgSrc,
      urls: [imgSrc],
      success: res => {
        console.log(res);
      },
      fail: err => {
        console.log(err);
      }
    })
  }
})

注意:该功能需在真机上测试,微信开发者工具中的模拟器看不到效果哟。文章来源地址https://www.toymoban.com/news/detail-797727.html

到了这里,关于小程序中使用wx.previewImage实现图片预览与缩放的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • #Uniapp: uni.previewImage(OBJECT) 预览图片

    uni.previewImage(OBJECT) 预览图片。 api地址 媒体-图片 示例 OBJECT 参数说明 参数名 类型 必填 说明 平台差异说明 count Number 否 最多可以选择的图片张数,默认9 见下方说明 sizeType Array 否 original 原图,compressed 压缩图,默认二者都有 App、微信小程序、支付宝小程序、百度小程序 e

    2024年01月25日
    浏览(38)
  • 使用Vue2开发一个图片预览组件,支持多图切换、缩放旋转、鼠标滚轮、键盘按键、拖动等等操作

    话不多说,咱们赶紧来开启本章的内容,这次小编给各位带来的依旧是实用类文章,分享如何开发一个完整的 图片预览组件 ,它支持多图切换、放大缩小、旋转、鼠标滚轮操作、键盘按键控制、拖动等等的功能,并且使用方便、易扩展,零依赖。 项目演示技术小编采用的是

    2024年02月09日
    浏览(72)
  • 微信小程序 — 图片实现缩放,拖拽功能

    movable-view 可移动的视图容器,在页面中可以拖拽滑动。 movable-view必须在 movable-area 组件中,并且必须是直接子节点,否则不能移动。 如果想让图片实现缩放,拖拽效果。则可以把图片放到movable-view容器里面 。 movable-view 可移动的视图容器,在页面中可以拖拽滑动。 效果如下

    2024年02月13日
    浏览(86)
  • asp微信小程序上传多张照片功能,wx.chooseMedia和wx.uploadFile配合实现多张图片上传

    由于项目需要使用asp,因此用asp写了一个接收微信小程序上传多张照片的功能,例用的是wx.chooseMedia和wx.uploadFile配合,循环上传多张照片,微信小程序现在好像最多可以上传20张,闲话不好上代码,需要的可以直接下载,前后台都有,本文只放前端代码: 本文实现微信小程序

    2024年02月11日
    浏览(59)
  • VX小程序 实现区域转图片预览

    图例 1、安装插件 wxml2canvas git地址参照:https://github.com/wg-front/wxml2canvas 2、类型 3、数据结构 4、页面引用 1、使用canvas画图组件 有坑:uni.getImageInfo 方法转出的地址是http 不是https,而 uni.previewImage 识别 https的,否则图片会出不来      希望我的愚见能够帮助你哦~,若有不足

    2024年02月11日
    浏览(42)
  • 小程序中使用上传图片,显示、删除、预览

    需要哦用户点击加号上传图片,并展示所上传图片和能够删除和预览 采用的uniapp,创建了一个view容器包裹加号图标和展示的图片。 内部展示图片超过9张时候,加号图片隐藏 点击加号 uni.showActionSheet(OBJECT) 点击后又使用看图片选择API 从底部向上弹出操作菜单 OBJECT参数说明

    2024年01月18日
    浏览(36)
  • uniapp中使用canvas,在微信小程序中实现图片缩放移动涂鸦文字

    最近需要一个功能,在微信中编辑图片,实现对图片的涂鸦、加文字、缩放、移动,以下基本能实现该功能。 uniapp中使用画布,实现图片的编辑-批量批改图片 1.初始化画布图片,图片是网络图片,非本地图片,所以需要先获取图片信息,直接使用uni.getImageInfo(如果是本地图

    2024年04月14日
    浏览(57)
  • 微信小程序(二)微信小程序选择本地图片显示并预览(实现左右滑动)

    在微信小程序里面实现选择图片然后预览是一个非常普遍的功能,在我们上传图片文件的时候,都会选择本地的图片进行上传,在上传之前会查看一下自己上传的图片是否准确。所以要做到预览图片。 下面就实现一个简单的本地图片显示预览的功能~~ 1、创建页面 这里我直接

    2024年02月03日
    浏览(71)
  • 前端使用scale属性结合CSS动态样式实现动态的图片缩放效果

    废话不多说,直接上代码: 示例一,使用css动态样式结合scale进行src图片的缩放。 示例二,使用css动态样式结合scale进行background背景图图片的缩放。

    2024年01月15日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包