Colorful-childhood/pages/clip/clip.js

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

  /**
   * 页面的初始数据
   */
  data: {
    imageUrl: '',
    cropperW: '',
    cropperH: '',
    img_ratio: '',
    IMG_W: '',
    IMG_H: '',
    clipImage: '',
    left: '',
    top: '',
    clipW: 200
  },

  //拖拽事件
  move: function ({ detail }) {
    this.setData({
      left: detail.x * 2,
      top: detail.y * 2
    })
  },
  //缩放事件
  scale: function ({detail}) {
    console.log(detail.scale)
    this.setData({
      clipW: 200 * detail.scale 
    })
  },
  //生成图片
  getImageInfo: function () {
    wx.showLoading({
      title: '图片生成中...',
    })
    const img_ratio = this.data.img_ratio;
    const canvasW = (this.data.clipW / this.data.cropperW) * this.data.IMG_W
    const canvasH = (this.data.clipW / this.data.cropperH) * this.data.IMG_H
    const canvasL = (this.data.left / this.data.cropperW) * this.data.IMG_W
    const canvasT = (this.data.top / this.data.cropperH) * this.data.IMG_H
    // 将图片写入画布
    const ctx = wx.createCanvasContext('myCanvas');
    //绘制图像到画布
    ctx.save(); // 先保存状态 已便于画完圆再用        
    ctx.beginPath(); //开始绘制  
    ctx.clearRect(0, 0, 1000, 1000)      
    //先画个圆      
    ctx.arc(this.data.clipW / 2, this.data.clipW / 2, this.data.clipW / 2, 0, 2 * Math.PI, false)       
    ctx.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 
    // ctx.setFillStyle('#EEEEEE')
    // ctx.fill()    
    ctx.drawImage(this.data.imageUrl, canvasL, canvasT, canvasW, canvasH, 0, 0, this.data.clipW, this.data.clipW); // 推进去图片        
    ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
    ctx.draw(true, () => {
      // 获取画布要裁剪的位置和宽度   
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: this.data.clipW,
        height: this.data.clipW,
        destWidth: this.data.clipW,
        destHeight: this.data.clipW,
        quality: 0.5,
        canvasId: 'myCanvas',
        success:  (res) => {
          wx.hideLoading()
          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) => {  
             console.log(res);
             const data = JSON.parse(res.data);
             if (data.success) {
                wx.navigateTo({
                  url: '/pages/setName/setName?imageUrl=' + data.data 
                })
             }
            },  
            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 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 () {

  }
})