微信小程序中图片自适应及双指缩放

最新推荐文章于 2024-02-03 01:20:32 发布

原创

最新推荐文章于 2024-02-03 01:20:32 发布 · 7.7k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #图片缩放 #移动端的缩放 #js缩放

本文介绍了如何在微信小程序中实现图片的自适应和双指缩放功能。首先，通过上传图片并获取其宽高信息来实现图片的自适应展示。接着，利用小程序的触摸事件记录双指的初始距离和移动距离，根据两者关系判断缩放方向。通过设定缩放阈值，限制图片的最大缩放比例为2倍。整个过程结合了微信小程序的API和计算方法，为后续的图片裁剪功能奠定了基础。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

预览

微信小程序实现对图片的缩放与裁剪

思路

wx.chooseImage上传图片
wx.getImageInfo获取图片宽高等信息
bindtouchstart,bindtouchmove记录双指事件
通过双指移动的距离与初始距离的关系判断缩放
规定阈值，最大与最小缩放

开始操作

上传图片

由于上传的图片需要放大与缩小，所以我们首先要在style动态绑定width 和height，其次要设置overflow为scroll。
然后开始使用wx.chooseImage上传图片，代码如下：

 choose: function() {
   
   
    let that = this,
      width = that.data.width,
      height = that.data.height;
    wx.chooseImage({
   
   
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
   
   
        const tempFilePaths = res.tempFilePaths[0];
        }
        )}