496_dongfengqichen_wxsmall/496_dongfengqichen/pages/poster/poster.js

// pages/poster/poster.js
const app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgUrl: app.globalData.urlStatic,//图片路径
    canvasContron:null,//canvas
    qrCodeUrl:"https://www.jiyou-tech.com/2020/496_qichen/static/images/testQrCode.png",
    windowScale:0,//屏幕缩放比
    windowW: 0,//屏幕宽度
    windowH: 0,//屏幕高度
    posterUrl:null,//海报图片
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.data.canvasContron = wx.createCanvasContext('myCanvas');
    wx.getSystemInfo({
      success: res => {
        this.data.windowScale = res.windowWidth / 750;
        this.data.windowW = res.windowWidth;
        this.data.windowH = res.windowHeight;
        this.posterDrawing();
      }
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title: '500元购车券',
      imageUrl: "",
      path: "/pages/coupon/coupon"
    }
  },
  saveImg:function(){//保存到手机
    wx.chooseImage({
      success: function (res) {
        console.log(res);
        const tempFilePaths = res.tempFilePaths
        wx.saveFile({
          tempFilePath: tempFilePaths[0],
          success(res) {
            console.log(res);
            const savedFilePath = res.savedFilePath
          }
        })
      }
    })
  },
  posterDrawing: function () {//海报绘制
    var ctx = this.data.canvasContron;
    var scale = this.data.windowScale;
    console.log(scale);
    //背景
    ctx.drawImage(this.data.imgUrl + '/images/tempImg1.jpg', 0, 0, scale * 444, scale * 817);//defaultHead
    ctx.setFillStyle("#FFFFFF");
    ctx.save();
    ctx.beginPath(); //开始绘制
    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针
    ctx.arc(scale * 48 / 2 + scale * 49, scale * 48 / 2 + scale * 538, scale * 48 / 2, 0, Math.PI * 2, false);
    ctx.clip(); //剪切
    ctx.drawImage(this.data.imgUrl + '/images/coupon.png', scale * 49, scale * 538, scale * 48, scale * 48); //头像
    ctx.restore(); //恢复之前保存的绘图上下文
    //名称
    ctx.setFontSize(scale * 28);
    ctx.setFillStyle('#FFFFFF');
    ctx.setTextAlign('left');
    ctx.fillText("啦啦啦", scale * 102, scale *572);
    //我是第XXX星探
    ctx.drawImage(this.data.imgUrl + '/images/posterNum.png', scale * 50, scale * 598, scale * 333, scale * 74);
    //二维码
    ctx.drawImage(this.data.qrCodeUrl, scale * 282, scale * 672, scale * 105, scale* 106);
    //绘制
    ctx.draw();
  },
  savePoster:function(){//生成海报
    wx.canvasToTempFilePath({
      width: 443 * this.windowScale,
      height: 817 * this.windowScale,
      destWidth: 443 * this.windowScale *this.data.windowW*3,
      destHeight: 817 * this.windowScale * this.data.windowH*3,
      canvasId: 'myCanvas',
      success: res => {
        wx.previewImage({
          urls: [res.tempFilePath] // 需要预览的图片http链接列表
        })
        // this.data.posterUrl = res.tempFilePath;
        // console.log(this.data.posterUrl);
      }
    })
  }
})