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

预览

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

思路

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

开始操作

上传图片

由于上传的图片需要放大与缩小,所以我们首先要在style动态绑定widthheight,其次要设置overflowscroll
然后开始使用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];
        }
        )}

获取图片信息

由于小程序无法操作DOM,我们获取图片信息不能像往常一样通过document.get。在小程序中需要使用wx.getImageInfo获取图片的相关信息。获取到上传的图片的宽高后,可以根据宽高的比列,实现特定条件下的自适应。

wx.getImageInfo(
  • 0
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要实现微信小程序图片双指缩放,可以使用小程序自带的 `<canvas>` 组件。具体步骤如下: 1. 在 WXML 文件添加 `<canvas>` 组件,并设置宽高和 ID: ```html <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ``` 2. 在 JS 文件获取 `<canvas>` 组件的上下文,并加载图片: ```javascript const ctx = wx.createCanvasContext('myCanvas'); const img = new Image(); img.src = '图片地址'; img.onload = function () { ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight); } ``` 3. 监听 `<canvas>` 组件的 touch 事件,实现双指缩放: ```javascript let distance = 0; // 初始距离 let scale = 1; // 初始缩放比例 wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true, }).exec((res) => { const canvas = res[0].node; // 获取 canvas 节点 const canvasWidth = res[0].width; // 获取 canvas 宽度 const canvasHeight = res[0].height; // 获取 canvas 高度 canvas.addEventListener('touchstart', (e) => { if (e.touches.length >= 2) { const x1 = e.touches[0].clientX; const y1 = e.touches[0].clientY; const x2 = e.touches[1].clientX; const y2 = e.touches[1].clientY; distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // 计算初始距离 } }); canvas.addEventListener('touchmove', (e) => { if (e.touches.length >= 2) { const x1 = e.touches[0].clientX; const y1 = e.touches[0].clientY; const x2 = e.touches[1].clientX; const y2 = e.touches[1].clientY; const newDistance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)); // 计算新距离 const delta = newDistance - distance; // 计算距离差 scale += delta / 100; // 根据距离差更新缩放比例 distance = newDistance; // 更新距离 ctx.drawImage(img, 0, 0, canvasWidth * scale, canvasHeight * scale); // 根据新的缩放比例绘制图片 ctx.draw(); } }); }); ``` 在 touchstart 事件记录双指触摸的初始距离,然后在 touchmove 事件根据双指移动的距离差更新缩放比例,并重新绘制图片。最后调用 `ctx.draw()` 方法将画布内容绘制到屏幕上。 需要注意的是,在 touchmove 事件需要使用 `ctx.drawImage()` 方法重新绘制图片,并传入新的宽高参数,这里的宽高需要根据当前的缩放比例计算得出。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值