微信小程序 单指平移 双指缩放图片功能

实现功能参考： 微信小程序自定义组件实现单指拖动、双指缩放效果 有修改。

给加拖动事件，我们需要知道它什么时候被点击、被拖拽和拖拽结束。

通过修改imageView的margin-left和margin-top来改变的位置以实现的单指移动效果和所有 *** 作结束松手后的回d效果。

通过修改imageView的宽和高以实现放大缩小的效果。且需要同时修改其margin-left和margin-top使能以两手指的中间点为原点缩放。

Talk is cheap, show you the code

接下来是交互事件

因为微信小程序的image有默认的宽高：width: 320px和height: 240px，所以只设置宽度100%是无效的，因为高度默认240px

只需要添加属性 mode="widthFix"

<image class="img" src="/images/1png" mode="widthFix">

设置宽度100%，

img{width: 100%;}

这样就可以实现宽度100%高度自适应，不会拉伸

微信小程序压缩有三种方法，一种是使用官方提供的接口wxcompressImage(Objectobject)；一种是通过压缩的大小，利用canvas重绘来得到压缩；最后一种安装第三方压缩包。

第一种方法很多人反映压缩不明显或者失效，所以选择使用canvas重绘来实现压缩。同时，该种方法可以控制的最大尺寸，保持上传大小尺寸相差不多。

具体 *** 作步骤如下：

1、通过wxchooseImage接口选择相机。

2、通过wxgetImageInfo接口获取信息（长宽，类型）。

3、计算压缩比例和最终的长宽。

4、创建canvas绘图上下文，绘制最终。

5、通过wxcanvasToTempFilePath接口将画布内容导出为并获取路径。

以上就是关于微信小程序 单指平移 双指缩放图片功能全部的内容，包括:微信小程序 单指平移 双指缩放图片功能、实现小程序image图片宽度100%高度自适应、微信小程序如何压缩图片等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！