//index.js
const app = getApp()
Page({
data: {
cardPath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534766809331&di=012cc4ad15d457ffa55c6537503eb84a&imgtype=0&src=http://picture.5068.com/allimg/121120/4-1211201G920.jpg',
headPath: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1534765039080&di=1e81a596bc89cd54db55c0dbc7c4bb87&imgtype=0&src=http://img3.100bt.com/upload/ttq/20140529/1401337844678_middle.png',
sendName: '文字描述描述文字'
},
onLoad: function (options) {
var that = this;
wx: wx.getSystemInfo({
success: function (res) {
that.setData({
pixelRatio: res.pixelRatio,
windowWidth: res.windowWidth,
windowHeight: res.windowHeight
})
}
})
that.drawCanvas();
},
//画图
drawCanvas: function () {
this.setData({
cardPath: this.data.cardPath,
headPath: this.data.headPath,
sendName: this.data.sendName
});
let ctx = wx.createCanvasContext('myCanvas');
let ctxW = this.data.windowWidth;
let ctxH = 1210;
// 默认像素比
let pixelRatio = this.data.pixelRatio;
// 垂直渐变
const grd = ctx.createLinearGradient(0, 0, 0, ctxH);
grd.addColorStop(0, '#ffffff');
grd.addColorStop(1, '#ffffff');
ctx.setFillStyle(grd);
ctx.fillRect(0, 0, ctxW, ctxH);
wx.getImageInfo({
src: this.data.cardPath,
success: (res) => {
ctx.drawImage(res.path, 15, 15, 345, 470); //card
wx.getImageInfo({
src: this.data.headPath,
success: (res) => {
/**/
ctx.arc(46,358,25, 0, 2 * Math.PI)
ctx.fill()
ctx.save();
ctx.beginPath(); //开始绘制
ctx.clip(); //剪切
ctx.drawImage(res.path, 23, 333, 50, 50); //userHeader  // 推进去图片必须是https
ctx.restore(); //恢复之前保存的绘图上下文 继续绘制
/**/
ctx.setTextAlign('left');
ctx.setTextBaseline('middle');
ctx.setFontSize(16);
ctx.setFillStyle('#fff');
this.fontLineFeed(ctx, this.data.sendName, 450, 30, 79, 328);
ctx.stroke();
ctx.draw();
}
})
}
})
},
// 保存图片
saveImage: function (e) {
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(result) {
wx.showToast({
title: '图片保存成功',
icon: 'success',
duration: 2000
})
}
})
}
})
},
// 文字换行
fontLineFeed: function (ctx, str, splitLen, strHeight, x, y) {
let strArr = [];
for (let i = 0, len = str.length / splitLen; i < len; i  ) {
strArr.push(str.substring(i * splitLen, i * splitLen   splitLen));
}
let s = 0;
for (let j = 0, len = strArr.length; j < len; j  ) {
s = s   strHeight;
ctx.fillText(strArr[j], x, y   s);
}
},
})