微信小程序中PHP开发图片处理技巧

处理微信小程序中的图片上传

在微信小程序中，用户可以通过选择本地图片或者拍摄照片的方式上传图片，开发者需要对上传的图片进行处理，以适应不同的页面展示需求，包括尺寸、分辨率、格式等方面。

// 示例代码
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    // 进行图片处理
  }
})

压缩图片大小

在上传图片之前，可以先对图片进行压缩以减小图片文件大小，加快上传速度。这里介绍一种简单的压缩图片大小的方法，利用canvas的toDataURL()方法将图片转为base64格式，从而得到压缩后的图片数据。

// 示例代码
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.getImageInfo({
      src: tempFilePaths[0],
      success: function(infoRes) {
        var canvasWidth = infoRes.width
        var canvasHeight = infoRes.height
        if (canvasWidth > 1024) { //限制宽度最大为1024
          canvasWidth = 1024
          canvasHeight = infoRes.height * (1024 / infoRes.width)
        }
        var canvas = document.createElement('canvas')
        var ctx = canvas.getContext('2d')
        canvas.width = canvasWidth
        canvas.height = canvasHeight
        ctx.drawImage(tempFilePaths[0], 0, 0, canvasWidth, canvasHeight)
        var base64Data = canvas.toDataURL('image/jpeg', 0.8) //转为base64
        //上传base64Data
      }
    })
  }
})

处理图片尺寸

在微信小程序中，不同的页面可能需要不同尺寸的图片，因此需要对上传的图片进行尺寸的处理。这里介绍一种通过canvas调整图片尺寸的方法。

// 示例代码
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.getImageInfo({
      src: tempFilePaths[0],
      success: function(infoRes) {
        var canvasWidth = 100 //设置目标宽度为100
        var canvasHeight = infoRes.height * (100 / infoRes.width)
        var canvas = document.createElement('canvas')
        var ctx = canvas.getContext('2d')
        canvas.width = canvasWidth
        canvas.height = canvasHeight
        ctx.drawImage(tempFilePaths[0], 0, 0, canvasWidth, canvasHeight)
        var base64Data = canvas.toDataURL('image/jpeg', 0.8) //转为base64
        //上传base64Data
      }
    })
  }
})

处理图片格式

在微信小程序中，不同的页面展示需要的图片格式可能不同，因此需要对上传的图片进行格式的处理。这里介绍如何将图片转为png格式。

// 示例代码
wx.chooseImage({
  count: 1,
  sizeType: ['original', 'compressed'],
  sourceType: ['album', 'camera'],
  success: function(res) {
    var tempFilePaths = res.tempFilePaths
    wx.getImageInfo({
      src: tempFilePaths[0],
      success: function(infoRes) {
        var canvasWidth = infoRes.width
        var canvasHeight = infoRes.height
        var canvas = document.createElement('canvas')
        var ctx = canvas.getContext('2d')
        canvas.width = canvasWidth
        canvas.height = canvasHeight
        ctx.drawImage(tempFilePaths[0], 0, 0, canvasWidth, canvasHeight)
        var base64Data = canvas.toDataURL('image/png') //转为png格式
        //上传base64Data
      }
    })
  }
})