Colorful-childhood/pages/clipPhoto/clipPhoto.js

// pages/clip/clip.js
const HOST = require('../../utils/const.js').apiUrl;
import httpRequestApi from '../../utils/APIRequest';
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imageUrl: '',
    cropperW: '',
    cropperH: '',
    img_ratio: '',
    IMG_W: '',
    IMG_H: '',
    clipImage: '',
    left: '',
    top: '',
    screenW: '',
    screenH: ''
  },
  //拖拽事件
  move: function ({ detail }) {
    this.setData({
      left: detail.x * 2,
      top: detail.y * 2
    })
  },
  //生成图片
  getImageInfo: function () {
    wx.showLoading({
      title: '图片生成中...',
    })
    const img_ratio = this.data.img_ratio;
    const canvasW = (this.data.screenW / this.data.cropperW) * this.data.IMG_W
    const canvasH = (this.data.screenH / this.data.cropperH) * this.data.IMG_H
    const canvasL = 0;
    const canvasT = (this.data.top / this.data.cropperH) * this.data.IMG_H
    // 将图片写入画布
    const ctx = wx.createCanvasContext('myCanvas');
    //绘制图像到画布       
    ctx.beginPath(); //开始绘制 
    //判断是竖着显示还是横着显示
    if(this.data.img_ratio >= 1) {
      //保存图片分别是图片地址，canvas绘制距离左边距离，距离上边距离，截取原图片宽度，原图片高度，图片在canvas上的左位置，上位置，生成图片的宽，生成图片的高；
      ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, 0, 0, this.data.screenW / 2, this.data.screenH / 2);

    } else {
      //如果图片比较窄两边留白，留白距离
      const liubaiLeft = (this.data.screenW / 2 - this.data.cropperW / 2) /2;
      //保存图片分别是图片地址，canvas绘制距离左边距离，距离上边距离，截取原图片宽度，原图片高度，图片在canvas上的左位置，上位置，生成图片的宽，生成图片的高；
      ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, liubaiLeft, 0, this.data.cropperW, this.data.screenH * img_ratio);
    } 
    ctx.draw(true, () => {
      // 获取画布要裁剪的位置和宽度   
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this.data.screenW / 2,
        height: this.data.screenH / 2,
        destWidth: this.data.screenW / 2,
        destHeight: this.data.screenH / 2,
        quality: 0.5,
        canvasId: 'myCanvas',
        success:  (res) => {
          wx.hideLoading()
          console.log(res);
          this.setData({
            clipImage: res.tempFilePath
          })

          //上传文件
          wx.uploadFile({  
            url: HOST + 'wx/file/upload',  
            filePath: res.tempFilePath,  
            name: 'uploadfile_ant',  
            header: {  
              "Content-Type": "multipart/form-data"  
            },  
            success: (res) => {  
              const data = JSON.parse(res.data);
              if(data.success) {
                //上传文件成功后放到相册里
                httpRequestApi.addPhotoList({
                  path: data.data
                }).success((res) => {
                  wx.navigateTo({
                    url: '/pages/album/album' 
                  })
                }).fail(() => {
                  wx.showModal({  
                    title: '错误提示',  
                    content: '图片上传到相册失败'
                  }) 
                });
              } 
            },  
            fail: function (res) {  
              wx.hideToast();  
              wx.showModal({  
                title: '错误提示',  
                content: '上传图片失败'
              })  
            }  
          }); 
          //成功获得地址的地方
          // wx.previewImage({
          //   current: '', // 当前显示图片的http链接
          //   urls: [res.tempFilePath] // 需要预览的图片http链接列表
          // })
        }
      })
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.imageUrl);
    //获取初始屏幕宽度
    const screenW = wx.getSystemInfoSync().windowWidth * 2;
    //h获取剪裁框的高度，按照16:9来计算高度
    const screenH = screenW / 16 * 9; 
    console.log('剪裁框宽高',screenW,screenH);
    this.setData({
      screenW,
      screenH
    })
    const imageUrl = options.imageUrl;
    this.setData({
      imageUrl
    })
    wx.getImageInfo({
      src: imageUrl,
      success: (res) => {
        console.log(res);
        //图片实际款高
        const width = res.width;
        const height = res.height;
        //图片宽高比例
        const img_ratio = width / height
        this.setData({
          img_ratio,
          IMG_W: width,
          IMG_H: height,
        })
        if (img_ratio >= 1) {
          //宽比较大，横着显示
          this.setData({
            cropperW: 750,
            cropperH: 750 / img_ratio,
          })
        } else {
          //竖着显示
          this.setData({
            cropperW: 750 * img_ratio,
            cropperH: 750
          })
        }
      } 
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})