wxmp-wodeshebao/public/pages/change-photo/change-photo.js

var businessT = require('../../../tool/business-tool.js')
var sysT = require('../../../tool/sys-tool.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    adapter: {
      viewHeight: 0,
      viewWidth: 0
    },
  },

  cancelAction: businessT.action(function (sender) {
    wx.navigateBack({
      
    })
  }),

  finishAction: businessT.action(function (sender) {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: sysT.sysInfo().windowWidth,
      height: sysT.sysInfo().windowWidth / 1.58,
      canvasId: 'canvas',
      success: function (res) {
        var pages = getCurrentPages()
        pages[pages.length - 3].finishTakePhoto(res.tempFilePath)
        wx.navigateBack({
          delta: 2
        })
      }
    })
  }),

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    sysT.adaptor()
    var viewWidth = sysT.sysInfo().windowWidth
    var viewHeight = sysT.sysInfo().windowWidth / 1.58
    var cameraHeight = sysT.usableHeight(316)//相机可是高度rpx
    if (sysT.suffixOfClass() == '-X') {
      var cameraHeight = sysT.usableHeight(500)//相机可是高度rpx
    }
    
    var widthBorder = 40 * sysT.rpxToPx()//取景框横边距
    var borderWidth = sysT.sysInfo().windowWidth - widthBorder * 2//取景框宽
    var borderHeight = borderWidth / 1.58//取景框高
    var heightBorder = (cameraHeight * sysT.rpxToPx() - borderHeight) / 2//取景框竖边距
    var proportion = viewWidth / borderWidth //放大比例

    var bigWidthBorder = widthBorder * proportion//放大后图片的横边距
    var bigHeightBorder = heightBorder * proportion//放大后图片的竖边距
    var bigImageWidth = sysT.sysInfo().windowWidth * proportion//放大后图片宽
    var bigImageHeight = cameraHeight * sysT.rpxToPx() * proportion//放大后图片高
    
    this.data.adapter = {
      viewWidth: viewWidth,
      viewHeight: viewHeight
    }
    this.setData({
      adapter: this.data.adapter
    })
    businessT.debugLog(options)
    var ctx = wx.createCanvasContext('canvas')
    
    ctx.drawImage(options.path, -bigWidthBorder, -bigHeightBorder, bigImageWidth, bigImageHeight)
    
    ctx.draw()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  // onShareAppMessage: function () {
  
  // }
})