预览
思路
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];
}
)}
获取图片信息
由于小程序无法操作DOM,我们获取图片信息不能像往常一样通过document.get
。在小程序中需要使用wx.getImageInfo
获取图片的相关信息。获取到上传的图片的宽高后,可以根据宽高的比列,实现特定条件下的自适应。
wx.getImageInfo(