php 小程序生成海报,微信小程序生成海报-CSDN博客

vivo x9 微信版本7.0.4 系统版本2.6.2

var memberTopicCount = this.data.memberTopicCount;//动态数

var memberFollowCount = this.data.memberFollowCount;//关注数

var memberBeFollowedCount = this.data.memberBeFollowedCount;//粉丝数

var memberNickName = this.data.memberNickName;//名字

var memberAvatarPath = this.data.memberAvatarPath;//头像

var that = this;

var memberIds = storage.getMember();

var memberId = memberIds.memberId;

http.request({

url: '/wechatMessage/access/mobile/v1/token',

data: {

success: function (data) {

http.request({

url: '/file/mobile/v1/saveImg/wxacode',

method: 'POST',

data: {

wxaCodePath: 'view/member/homePage?memberId=' + memberId,

success: function (data) {

var filepath = that.data.imageHost + data.filePath;

wx.downloadFile({

url: that.data.imageHost + data.filePath,

success: function (fliesres) {

that.setData({

hiddensaveimage: true,

filePathimg: that.data.imageHost + data.filePath

})

wx.showToast({

title: '生成中',

icon: 'loading',

duration: 6000

})

wx.downloadFile({

url: that.data.imageHost + that.data.memberAvatarPath,

success: function (sres) {

that.setData({

mysrc: sres.tempFilePath,

})

wx.downloadFile({

url: that.data.backimage,

success: function (backimage) {

const ctx = wx.createCanvasContext('smile')

ctx.save(); // 先保存状态已便于画完圆再用

ctx.beginPath()

ctx.drawImage(backimage.tempFilePath, 0, 0, 960, 1120)

ctx.font = "bold 16px PingFangSC-Regular, sans-serif"

ctx.setFontSize(37)

// 判断字体长度

if (that.data.memberNickName.length === 4) {

var avatarurl_widths = 400; //绘制的头像宽度

var avatarurl_heigths = 400; //绘制的头像高度

var avatarurls_x = 260; //绘制的头像在画布上的位置

var avatarurls_y = 185; //绘制的头像在画布上的位置

ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

}

if (that.data.memberNickName.length === 1) {

var avatarurl_widths = 400; //绘制的头像宽度

var avatarurl_heigths = 400; //绘制的头像高度

var avatarurls_x = 300; //绘制的头像在画布上的位置

var avatarurls_y = 185; //绘制的头像在画布上的位置

ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

}

if (that.data.memberNickName.length === 2) {

var avatarurl_widths = 400; //绘制的头像宽度

var avatarurl_heigths = 400; //绘制的头像高度

var avatarurls_x = 285; //绘制的头像在画布上的位置

var avatarurls_y = 185; //绘制的头像在画布上的位置

ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

}

if (that.data.memberNickName.length === 6) {

var avatarurl_widths = 400; //绘制的头像宽度

var avatarurl_heigths = 400; //绘制的头像高度

var avatarurls_x = 230; //绘制的头像在画布上的位置

var avatarurls_y = 185; //绘制的头像在画布上的位置

ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

}

if (that.data.memberNickName.length === 5) {

var avatarurl_widths = 400; //绘制的头像宽度

var avatarurl_heigths = 400; //绘制的头像高度

var avatarurls_x = 240; //绘制的头像在画布上的位置

var avatarurls_y = 185; //绘制的头像在画布上的位置

ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

}

if (that.data.memberNickName.length === 8) {

var avatarurl_widths = 400; //绘制的头像宽度

var avatarurl_heigths = 400; //绘制的头像高度

var avatarurls_x = 240; //绘制的头像在画布上的位置

var avatarurls_y = 185; //绘制的头像在画布上的位置

ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

}

if (that.data.memberNickName.length === 10) {

var avatarurl_widths = 400; //绘制的头像宽度

var avatarurl_heigths = 400; //绘制的头像高度

var avatarurls_x = 220; //绘制的头像在画布上的位置

var avatarurls_y = 185; //绘制的头像在画布上的位置

ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

}

if (that.data.memberNickName.length > 10) {

var avatarurl_widths = 400; //绘制的头像宽度

var avatarurl_heigths = 400; //绘制的头像高度

var avatarurls_x = 210; //绘制的头像在画布上的位置

var avatarurls_y = 185; //绘制的头像在画布上的位置

ctx.fillText(that.data.memberNickName, avatarurl_widths / 2 + avatarurls_x - 40, avatarurl_heigths / 2 + avatarurls_y + avatarurls_y + 5)

}

ctx.font = "normal 16px PingFangSC-Regular, sans-serif"

ctx.setFontSize(32)

ctx.fillText('动态:' + memberTopicCount, 270, 660, 150)

ctx.fillText('关注:' + memberFollowCount, 440, 660, 150)

ctx.fillText('粉丝:' + memberBeFollowedCount, 600, 660, 150)

ctx.drawImage(fliesres.tempFilePath, 760, 900, 140, 140)

ctx.font = " 30px PingFangSC-Regular, sans-serif"

ctx.setFontSize(28)

ctx.fillText('长按扫码关注', 720, 1070)

ctx.beginPath(); //开始绘制

//先画个圆

var avatarurl_width = 180; //绘制的头像宽度

var avatarurl_heigth = 180; //绘制的头像高度

var avatarurl_x = 400; //绘制的头像在画布上的位置

var avatarurl_y = 330; //绘制的头像在画布上的位置

ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);

ctx.clip();//画好了圆剪切原始画布中剪切任意形状和尺寸。则所有之后的绘图都会被限制在被剪切的区域内这也是我们要save上下文的原因

ctx.setFillStyle('#EEEEEE')

ctx.drawImage(sres.tempFilePath, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);

ctx.restore(); //恢复之前保存的绘图上下文恢复之前保存的绘图上下午即状态可以继续绘制

ctx.draw(true, setTimeout(function () {

wx.canvasToTempFilePath({

canvasId: 'smile',

success: function (res) {

wx.saveImageToPhotosAlbum({

filePath: res.tempFilePath,

success: function (data) {

console.log(res.tempFilePath);

wx.previewImage({

current: res.tempFilePath, // 当前显示图片的http链接

urls: [res.tempFilePath] // 需要预览的图片http链接列表

})

wx.showToast({

title: '保存成功',

mask: true,

icon: "success",

duration: 1500

})

wx.hideToast();

}, fail: function (res) {

wx.getSetting({

success: (res) => {

if (!res.authSetting['scope.writePhotosAlbum']) {

that.openConfirm();

} else {

}

})

wx.showToast({

title: '保存失败',

mask: true,

icon: "none",

duration: 1500

});

}

})

}, fail: function (fres) {

that.setData({

hiddensaveimage: false

})

wx.showToast({

title: '生成失败,请稍后重试',

mask: true,

icon: "none",

duration: 1500

})

}

})

that.setData({

hiddensaveimage: false

})

}, 1000))

}, fail: function (fres) {

}

})

}

})

}

})

// 生图片end

}

});

}.bind(this)

});