更新API后的操作
html
<canvas type="2d" id='myCanvas' style="width: 375px;height: 667px;"></canvas>
js代码
createNewImg: function () {
var that = this;
wx.createSelectorQuery()
.select('#myCanvas')
.fields({ node: true, size: true })
.exec( async res => {
// 获取尺寸单位
const dpr = wx.getSystemInfoSync().pixelRatio
// 获取canvas 对象
let textCanvas = res[0].node
// 设置宽高
textCanvas.width = res[0].width * dpr
textCanvas.height = res[0].height * dpr
// 创建一个2d canvas对象
const context = textCanvas.getContext('2d')
//清空画板
context.clearRect(0, 0, 320, 410);
// 缩放
context.scale(dpr, dpr)
// 背景色
// context.globalAlpha = '0'
context.fillStyle = '#fff';
// 填充矩形宽高
// context.fillRect(0, 0, 375, 567)
// 绘制背景图
const bg = textCanvas.createImage()
bg.src = "/assets/image/party_development/share_bg.png";
let shareBg = await new Promise((resolve, reject) => {
bg.onload = () => resolve(bg)
bg.onerror = (e) => reject(e)
});
context.drawImage(shareBg, 24, 56, 325, 520);
// 绘制内容背景图
let content = textCanvas.createImage()
content.src='/assets/image/party_development/share_center.png'
let content_bg = await new Promise((resolve, reject) => {
content.onload = () => resolve(content)
content.onerror = (e) => reject(e)
})
context.drawImage(content_bg, 54, 220, 261, 243);
// 绘制个人信息头像
let avatar = textCanvas.createImage()
avatar.src='/assets/image/avatar.png'
let avatar_image = await new Promise ((resolve, reject) => {
avatar.onload = () => resolve(avatar)
avatar.onerror = (e) => reject(e)
})
context.drawImage(avatar_image, 74, 230,46,44)
// 绘制个人信息
context.font = '15px bold ';
context.fillStyle = '#010F37';
context.fillText("张三", 130, 247);
context.font = '14px normal'
context.fillStyle = '#60676D'
context.fillText("邀您一起", 130, 267);
// 绘制活动内容
let activity = textCanvas.createImage()
activity.src='/assets/image/test.png'
let activity_image = await new Promise ((resolve, reject) => {
activity.onload = () => resolve(activity)
activity.onerror = (e) => reject(e)
})
context.drawImage(activity_image, 64, 300, 240, 116)
context.font = '14px normal'
context.fillStyle = '#010F37'
context.fillText("活动标题", 74, 444);
// 绘制小程序二维码
let wx_info = textCanvas.createImage()
wx_info.src='/assets/image/party_development/wx_bg.png'
let wx_bg = await new Promise ((resolve, reject) =>{
wx_info.onload = () => resolve(wx_info)
wx_info.onerror = (e) => reject(e)
})
context.drawImage(wx_bg, 54, 486, 261, 71)
context.font = '14px normal'
context.fillStyle = '#4574FF'
context.fillText("长按识别二维码 >>", 74, 527);
let code = textCanvas.createImage()
code.src = '/assets/image/party_development/ewm.jpg'
let code_image = await new Promise ((resolve, reject) =>{
code.onload = () => resolve(code)
code.onerror = (e) => reject(e)
})
context.drawImage(code_image,240, 492, 60, 60)
//将生成好的图片保存到本地
setTimeout(function () {
wx.canvasToTempFilePath({
canvas: textCanvas,
success: function (res) {
var tempFilePath = res.tempFilePath;
that.setData({
imagePath: tempFilePath,
canvasHidden: true
});
},
fail: function (res) {
}
});
}, 200);
})
},