微信小程序图片缩放功能实现及闭坑

	最近有个甲方，要求小程序里面的图片可以缩放，我本以为是一件特别简单的事情，然而也就是从那个时候起，事情开始变得不简单。

一 利用触摸事件+tranform
确实可以实现缩放的效果，但是它的闪动频率极高，基本你一碰到屏幕，就开始连闪，我一开始这个做好后，我自己这关都没过去

二 movable-view
微信提供的组件，可以缩放，但是它是以左上角为原点进行缩放，而且不能移动，就是你放大后，你大概只能看到左上角放大的部分，你想移动去看其他部分，不可能！

三 wx.previewImage
这个api可以满足绝大部分的需求，如果图片大小不大的话，可以使用这个api，可以很好的实现双指缩放，单指移动的效果

四 wx.previewIamge + wx.downloadFile
单用wx.previewImage可以满足大部分需求，但是如果客户传的图很大（比如16M），如果只用它，就可能出现黑屏一直转圈的情况。
我的解决方案是先利用wx.downloadFile下载图片，再用下载成功返回的临时路劲去预览大图，确实能预览出来，只是等待的时间较长。但是与我对接的是文科出身，不懂技术的甲方，非要图片缩放功能，且一直在和我们扯皮，在这种情况下，这种方案便是相对较好的方法了。后续他问为什么这么慢，我的回复是图片太大了之类的，然后他说他去问问技术，没过一会就过来说他不知道小程序渲染精度那么高的图片那么困难。得，总算结束了。
下面是关键代码：

previewImage(e) {
    const {photo:imageUrl} = e.currentTarget.dataset
    console.log(imageUrl);
    wx.showLoading({
      title: '加载中...',
    })
    wx.downloadFile({
      url: imageUrl,
      success: (res) => {
        if (res.statusCode === 200) {
          const tempFilePath = res.tempFilePath;
          wx.previewImage({
            current: tempFilePath, // 当前显示图片的临时文件路径
            urls: [tempFilePath], // 需要预览的图片临时文件路径列表
            success: () => {
              console.log('Preview image success');
              wx.hideLoading()
            },
            fail: (err) => {
              console.error('Preview image failed:', err);
              wx.hideLoading()
              wx.showToast({
                title: '图片加载失败，请检查图片路径',
                icon: 'none',
                duration: 2000
              });
            }
          });
        } else {
          console.error('Download file failed:', res);
          wx.hideLoading()
          wx.showToast({
            title: '图片下载失败，请检查网络连接',
            icon: 'none',
            duration: 2000
          });
        }
      },
      fail: (err) => {
        console.error('Download file failed:', err);
        wx.hideLoading()
        wx.showToast({
          title: '图片下载失败，请检查网络连接',
          icon: 'none',
          duration: 2000
        });
      }
    });
  }

感谢您的阅读	本人小白 欢迎各路大神指教