微信小程序Canvas绘制海报

image.png

index.js

const app = getApp()
// 设置文本
const setText = (context, fs, color, x, y, c) => {
  context.setFontSize(fs);
  context.setFillStyle(color);
  context.setTextAlign('left');
  context.fillText(c, x, y);
  context.restore();
};
Page({
  data: {
    imagePath:''
  },
  onLoad(){
    var that=this;
//#####如需引用网络图片 需先下载
    wx.downloadFile({
       url: 'https://xxxx.com/image',
       success: function (res) {
           that.setData({
              path: res.tempFilePath
           })
        }
     })
    var ctx = wx.createCanvasContext('mycanvas');
    var c_avatar = '../image/timg (2).jpg';
    var wechat = '../image/wechat.png';
    var path =that.data.path;
    // 绘制背景颜色
    ctx.fillStyle = "#ffe200";
    ctx.fillRect(0, 0, 375, 612);
    // 绘制孩子头像、姓名  年份
    //绘制名字
    setText(ctx, 16, '#333333', 90, 45, '骆一锅');
    //绘制年龄
    setText(ctx, 14, '#333333', 90, 65, '三岁6个月');
    //绘制年份
    setText(ctx, 20, '#333333', 210, 55, "2019,");
    //绘制标题
    setText(ctx, 16, '#333333', 260, 55, "每月'心'发现");
    // 绘制画报外框
    ctx.rect(20, 85, 335, 457)
    ctx.setFillStyle('white')
    ctx.fill()
    // 绘制画报背景图
    //这个地方的图片是需要注意，图片需要下载不然，手机上不能正常显示！！！
    ctx.drawImage(path, 30.85, 95, 315, 437);
    setText(ctx, 44, '#fff', 62, 160, '1');
    setText(ctx, 36, '#fff', 62, 200, 'Jan.');
    //头像
    ctx.arc(45, 45, 25, 0, 2 * Math.PI) //画出圆
    ctx.strokeStyle = "#fff";
    ctx.clip(); //裁剪上面的圆形
    
    ctx.drawImage(c_avatar, 20, 20, 50, 50);
    // 绘制生成画报
    ctx.draw(true, setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          console.log(res)
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath
          });
        },
        fail: function (res) {
          console.log(res);
        }
      })
    }, 1000));
  }
})

index.wxml

<view class="intro">
  <canvas style="width: 375px;height: 612px;position:fixed;top:9999px;left:0;z-index:223;" canvas-id="mycanvas"></canvas>
  <image src="{{imagePath}}" mode="widthFix"></image>
</view>