小白学习微信小程序的图片处理和预览技巧

微信小程序是一种开发平台，可以通过它实现各种功能，包括图片处理和预览。在本文中，我将向你介绍如何在微信小程序中进行图片处理和预览，并且会提供代码案例来帮助你更好地理解。

图片处理技巧

1. 图片上传 首先，我们需要向用户提供图片上传功能。在小程序中，我们可以使用<input>标签来创建一个文件选择器，让用户选择图片文件。然后，我们可以使用wx.uploadFile方法将图片上传到服务器。

// 页面模板文件template.wxml
<view>
  <button bindtap="chooseImage">选择图片</button>
  <image src="{{imageSrc}}"></image>
</view>

// 页面逻辑文件template.js
Page({
  data: {
    imageSrc: ''
  },
  chooseImage: function() {
    var that = this;
    wx.chooseImage({
      success: function(res) {
        var tempFilePaths = res.tempFilePaths;
        wx.uploadFile({
          url: 'https://example.com/upload',
          filePath: tempFilePaths[0],
          name: 'file',
          success: function(res) {
            that.setData({
              imageSrc: res.data
            })
          }
        })
      }
    })
  }
})

1. 图片裁剪 有时候，我们需要将上传的图片进行裁剪，以适应页面的显示要求。在微信小程序中，我们可以使用<image>标签的mode属性来设置裁剪方式。

<image src="{{imageSrc}}" mode="aspectFill"></image>

mode属性有以下几个取值：

• scaleToFill：缩放模式，不保持原始宽高比，图片拉伸至填满整个画布。
• aspectFit：缩放模式，保持原始宽高比，图片缩放以适应画布的宽度或高度。
• aspectFill：缩放模式，保持原始宽高比，图片缩放以填充整个画布。
• widthFix：缩放模式，宽度不变，高度自动变化，保持原始宽高比。
• heightFix：缩放模式，高度不变，宽度自动变化，保持原始宽高比。

1. 图片压缩 为了提高页面加载速度和节省带宽，我们可以对图片进行压缩。在小程序中，我们可以使用canvas画布来实现图片的压缩。

// 页面逻辑文件template.js
Page({
  compressImage: function(tempFilePath) {
    var that = this;
    wx.getImageInfo({
      src: tempFilePath,
      success: function(res) {
        var ctx = wx.createCanvasContext('canvas');
        var ratio = 1;
        var maxWidth = 720;
        var maxHeight = 1280;
        var width = res.width;
        var height = res.height;

        if (width > maxWidth || height > maxHeight) {
          if (width / height > maxWidth / maxHeight) {
            ratio = maxWidth / width;
          } else {
            ratio = maxHeight / height;
          }
        }

        var canvasWidth = width * ratio;
        var canvasHeight = height * ratio;

        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
        ctx.drawImage(tempFilePath, 0, 0, canvasWidth, canvasHeight);
        ctx.draw(false, function() {
          wx.canvasToTempFilePath({
            canvasId: 'canvas',
            success: function(res) {
              that.setData({
                imageSrc: res.tempFilePath
              });
            }
          })
        })
      }
    })
  }
})

在上面的代码中，我们首先获取到图片的宽度和高度，然后根据设定的最大宽度和最大高度计算出压缩比例。接下来，我们创建一个canvas画布，将图片绘制到画布上，最后将画布内容保存为临时文件路径，并更新页面中的图片。

图片预览技巧

1. 单张图片预览 微信小程序提供了一个wx.previewImage方法，可以实现单张图片的预览功能。我们只需要将要预览的图片路径传递给该方法即可。

// 页面模板文件template.wxml
<view>
  <image bindtap="previewImage" src="{{imageSrc}}"></image>
</view>

// 页面逻辑文件template.js
Page({
  data: {
    imageSrc: 'https://example.com/image.jpg'
  },
  previewImage: function() {
    wx.previewImage({
      urls: [this.data.imageSrc]
    })
  }
})

1. 多张图片预览 除了单张图片预览，微信小程序还提供了一个wx.previewImage方法的改进版wx.previewImage，可以实现多张图片的预览功能。我们只需要将要预览的图片路径传递给该方法即可。

// 页面模板文件template.wxml
<view>
  <block wx:for="{{imageUrls}}" wx:key="index">
    <image bindtap="previewImages" data-url="{{item}}" src="{{item}}"></image>
  </block>
</view>

// 页面逻辑文件template.js
Page({
  data: {
    imageUrls: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg'
    ]
  },
  previewImages: function(event) {
    var currentUrl = event.currentTarget.dataset.url;
    wx.previewImage({
      current: currentUrl,
      urls: this.data.imageUrls
    })
  }
})

在上面的代码中，我们使用<block>标签结合wx:for指令来遍历图片路径数组，然后将每个路径传递给wx.previewImage方法。

总结

通过以上的介绍，我们可以看到，在微信小程序中进行图片处理和预览是相对简单的。我们可以通过文件选择器实现图片上传，通过<image>标签的mode属性进行图片裁剪，通过canvas画布进行图片压缩，通过wx.previewImage方法实现单张或多张图片的预览。以上内容只是基础，你还可以进一步探索更多的图片处理和预览技巧，以满足你的实际需求。