抖音小程序海报

ttml:

<view class="container">
  <view class="body canvas-space">
    <canvas canvas-id="canvas" style="{{375 * rpx}}px;height:{{600 * rpx}}px" class="canvas"></canvas>
  </view>

  <view catchtap='save' class="saveImg">保存优惠券</view>
</view>

ttjs:

onLoad: function (option) {
   this.ctx = tt.createCanvasContext('canvas');
   let res = tt.getSystemInfoSync()
    this.setData({
      rpx: res.windowWidth / 375
    })
    this.setData({
      rpx: res.windowWidth / 375
    })
}
drawBackground() {
    var that = this
    let ctx = this.ctx;
    let res = tt.getSystemInfoSync()
    let rpx = res.windowWidth / 375
    console.log('res.windowWidth',res)

    that.setData({
      rpx: res.windowWidth / 375
    })

    //我是大背景
    ctx.setFillStyle('#602671');    //为创建的canvans上下文添充颜色  如果没有设置 fillStyle，默认颜色为 black。
    ctx.fillRect(0, 0, 375 * rpx, 600 * rpx)

    //我是白色背景
    ctx.setFillStyle('white');    //为创建的canvans上下文添充颜色  如果没有设置 fillStyle，默认颜色为 black。
    ctx.fillRect(27.5 * rpx, 58 * rpx, 320 * rpx, 495 * rpx)



    ctx.save();
    ctx.beginPath(); //开始绘制
    //  先画个圆
    // ctx.arc(190 * rpx, 60 * rpx, 30 * rpx, 0 * rpx, Math.PI * 2, false);  //false代表顺时针  图片的位置加半径
    // ctx.setStrokeStyle('white')
    ctx.clip();//画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
    ctx.drawImage('/image/logo2.png', 158 * rpx, 30 * rpx, 60 * rpx, 60 * rpx); // 推进去图片
    ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下文即状态 可以继续绘制

    ctx.drawImage('/image/top.png', 27.5 * rpx, 50 * rpx, 320 * rpx, 10 * rpx);
    ctx.drawImage('/image/logo2.png', 160 * rpx, 31 * rpx, 60 * rpx, 47 * rpx);

    ctx.drawImage('/image/tit.png', 110 * rpx, 100 * rpx, 150 * rpx, 60 * rpx);

   

    ctx.setFillStyle("#602671");
    ctx.setFontSize(30 * rpx);                               //字大小
    ctx.setTextAlign('left');                        //是否居中显示，参考点画布中线
    ctx.fillText(this.data.coupon.order_price, 143 * rpx, 157 * rpx);

    ctx.setFillStyle("#602671");
    ctx.setFontSize(30 * rpx);                               //字大小
    ctx.setTextAlign('left');                        //是否居中显示，参考点画布中线
    ctx.fillText(this.data.coupon.price, 230 * rpx, 157 * rpx);

    ctx.drawImage('/image/border.png', 73 * rpx, 175 * rpx, 230 * rpx, 230 * rpx);

    ctx.drawImage(this.data.code, 78 * rpx, 180 * rpx, 220 * rpx, 220 * rpx);

    ctx.drawImage('/image/line.png', 15 * rpx, 420 * rpx, 344 * rpx, 24 * rpx);

    ctx.drawImage('/image/text.png', 50 * rpx, 465 * rpx, 280 * rpx, 70 * rpx);

    ctx.drawImage('/image/bottom.png', 27 * rpx, 550 * rpx, 320 * rpx, 10 * rpx);
   

    ctx.draw();


  },

  draw() {
    var that = this
    let ctx = this.ctx;
    ctx.clearRect(0, 0, 300, 300); //每一次都要将canvas清空一下，不然秒针就会一直显示在canvas上面   
    this.drawBackground();
    ctx.draw();
    //  that.saveImg()
    // var t = setTimeout(function () {
    //   that.saveImg()
    //   clearTimeout(t)
    // }, 2000)

  },

  save() {
    var that = this
    tt.authorize({
      scope: "scope.album",
      success:function(res) {
        console.log('success',res);
        // 用户同意授权用户信息
        that.saveImg()
      },
      fail:function(res) {
        console.log('fail',res);
        tt.showToast({
          title: '保存失败',
          icon: 'error'
        })
      }
    });
  },
  saveImg() {
    let that = this;


    console.log(111111111)
    // var rpx = 1
    let rpx = that.data.rpx
    console.log('rpx',rpx)
    try {

      tt.canvasToTempFilePath({
        x: 0,
        y: 0,
         375 * rpx,                     //画布宽高
        height: 600 * rpx,
        destWidth: 1125 * rpx,                 //画布宽高*dpr 以iphone6为准
        destHeight: 1800 * rpx,                //放大2倍以上，解决保存的图片模糊的问题
        canvasId: 'canvas',
        success: function (res) {
          console.log('success--------', res) //生成的临时图片路径
          tt.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function (res) {
              // console.log(res);
              tt.showToast({
                title: '保存成功',
              })
              tt.redirectTo({
                url: "/pages/index/index",
                success:function(redirectTo_res11) {
                  console.log(redirectTo_res11);
                },
                fail:function(redirectTores) {
                  console.log(`redirectTo 调用失败`);
                },
              });
            },
            fail: function () {

              console.log('a')
            }
          })
        },
        complete: function (res) {
          console.log('complete---------', res)
        },
        fail: function (res) {
          console.log('error---------', res)
        }
      })
    } catch (e) {
      console.log('e-----', e)
    }
    //  console.log(3333)
  }