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

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

在微信小程序中，图片处理和预览是非常常见的需求。本文将介绍一些常用的图片处理和预览技巧，并通过代码案例进行详细说明。

一、图片处理

1. 图片上传

在微信小程序中，可以通过wx.chooseImage接口选择图片，并上传到服务器。以下是一个简单的示例代码：

wx.chooseImage({
  count: 1, // 最多选择的图片张数
  sizeType: ['original', 'compressed'], // 可以指定原图或压缩图
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
  success: function (res) {
    // 选择成功后的回调函数
    var tempFilePaths = res.tempFilePaths;
    // 将选择的图片上传到服务器
    wx.uploadFile({
      url: 'https://example.com/upload', // 服务器上传接口
      filePath: tempFilePaths[0],
      name: 'file',
      success: function (res) {
        // 上传成功后的回调函数
        var data = res.data;
        // 处理服务器返回的数据
      }
    })
  }
})

在这个示例中，wx.chooseImage用于选择图片，wx.uploadFile用于上传图片。选择成功后，可以通过tempFilePaths获取选择的图片路径，然后将其上传到服务器。

1. 图片裁剪

如果需要对图片进行裁剪，可以使用canvas元素进行处理。以下是一个简单的示例代码：

// 获取图片信息
wx.getImageInfo({
  src: 'https://example.com/image.jpg',
  success: function (res) {
    var width = res.width; // 图片宽度
    var height = res.height; // 图片高度
    var ratio = width / height; // 图片宽高比

    // 在canvas上绘制图片
    var canvas = wx.createCanvasContext('imageCanvas');
    canvas.drawImage('https://example.com/image.jpg', 0, 0, width, height);
    canvas.draw(false, function () {
      // 裁剪图片
      wx.canvasToTempFilePath({
        canvasId: 'imageCanvas',
        x: 0, // 裁剪起点横坐标
        y: 0, // 裁剪起点纵坐标
        width: width, // 裁剪宽度
        height: height, // 裁剪高度
        destWidth: width, // 输出图片宽度
        destHeight: height, // 输出图片高度
        success: function (res) {
          var tempFilePath = res.tempFilePath; // 裁剪后的图片路径
          // 处理裁剪后的图片
        }
      })
    })
  }
})

在这个示例中，首先通过wx.getImageInfo获取图片的宽度和高度，然后通过canvas.drawImage绘制图片。接着，通过wx.canvasToTempFilePath进行裁剪，指定裁剪的起点、宽高和输出图片的宽高。裁剪成功后，可以通过tempFilePath获取裁剪后的图片路径。

1. 图片压缩

如果需要对图片进行压缩，可以使用Image()构造函数进行处理。以下是一个简单的示例代码：

wx.chooseImage({
  count: 1,
  sizeType: ['original'],
  sourceType: ['album'],
  success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    var img = new Image();
    img.src = tempFilePaths[0];
    img.onload = function () {
      var canvas = document.createElement('canvas');
      var ctx = canvas.getContext('2d');

      var maxWidth = 800;
      var maxHeight = 800;
      var width = img.width;
      var height = img.height;

      if (width > height && width > maxWidth) {
        height *= maxWidth / width;
        width = maxWidth;
      } else if (height > width && height > maxHeight) {
        width *= maxHeight / height;
        height = maxHeight;
      }

      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);

      var base64Data = canvas.toDataURL('image/jpeg', 0.8); // 压缩后的图片数据
      // 处理压缩后的图片
    }
  }
})

在这个示例中，通过wx.chooseImage选择图片，然后创建一个Image对象并指定图片路径，使用canvas绘制压缩后的图片。最后，通过canvas.toDataURL获取压缩后的图片数据。

二、图片预览

1. 单张图片预览

在微信小程序中，可以通过wx.previewImage接口预览单张图片。以下是一个简单的示例代码：

wx.previewImage({
  current: 'https://example.com/image.jpg', // 当前显示图片的链接
  urls: ['https://example.com/image.jpg'] // 需要预览的图片链接列表
})

在这个示例中，current参数用于指定当前显示的图片链接，urls参数用于指定需要预览的图片链接列表。

1. 多张图片预览

如果需要预览多张图片，可以使用wx.previewImage接口结合wx.chooseImage接口。以下是一个简单的示例代码：

wx.chooseImage({
  count: 9, // 最多选择的图片张数
  success: function (res) {
    var tempFilePaths = res.tempFilePaths;
    wx.previewImage({
      current: tempFilePaths[0], // 当前显示图片的链接
      urls: tempFilePaths // 需要预览的图片链接列表
    })
  }
})

在这个示例中，通过wx.chooseImage选择图片，然后将选择的图片链接作为参数传递给wx.previewImage进行预览。

总结

本文介绍了微信小程序中常用的图片处理和预览技巧，并通过代码案例进行了详细说明。希望对小白学习微信小程序的图片处理和预览有所帮助。如有不清楚的地方，请留言询问。