1.下载 海报里面所需图片 ,一般来说是网络地址
uni.downloadFile({
url:e,
success:function(e){
}
})
2.绘制canvas 海报,
<canvas class="canOne" canvas-id="firstCanvas" ></canvas>
let that = this
let ctx = uni.createCanvasContext('firstCanvas')
let canvaWidth = uni.upx2px(620)
let canvaHight = uni.upx2px(1060)
let firstBgWidth = uni.upx2px(560)
let firstBgheight = uni.upx2px(900)
let firstBgX = uni.upx2px(30)
let firstBgeY = uni.upx2px(80)
let firstImageWidth = uni.upx2px(520)
let firstImageHeight = uni.upx2px(340)
let firstImageX = uni.upx2px(50)
let firstImageY = uni.upx2px(100)
let fontTitle = uni.upx2px(36)
let fontTeacher = uni.upx2px(24)
let fontName = uni.upx2px(26)
let fontNames = uni.upx2px(18)
var avatarurl_width = 50;
var avatarurl_heigth = 50;
var avatarurl_x = 30;
var avatarurl_y = uni.upx2px(750)
ctx.drawImage(this.data.bg_1, 0, 0, canvaWidth, canvaHight)
ctx.drawImage(this.data.bg_11, firstBgX, firstBgeY, firstBgWidth, firstBgheight)
ctx.drawImage(this.data.firstImage, firstImageX, firstImageY, firstImageWidth, firstImageHeight)
var name1height = uni.upx2px(500)
var name1width = uni.upx2px(500)
ctx.setFillStyle('#262626')
ctx.setFontSize(fontTitle)
ctx.textAlign = "left"
ctx.fillText(this.data.title, 30, name1height, name1width)
var name2height = uni.upx2px(540)
ctx.setFillStyle('#9A9A9A')
ctx.setFontSize(fontTeacher)
ctx.textAlign = "left"
ctx.fillText('授课讲师:' + this.data.teacher, 30, name2height, name1width)
ctx.save();
ctx.beginPath();
ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2,false);
ctx.clip();
ctx.drawImage(this.data.headImage, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
ctx.restore();
ctx.setFillStyle('#262626')
ctx.setFontSize(fontName)
ctx.textAlign = "left"
ctx.fillText(this.data.name, 90, uni.upx2px(790), 250)
ctx.setFillStyle('#9A9A9A')
ctx.setFontSize(fontNames)
ctx.textAlign = "left"
ctx.fillText(this.data.produce_top, 90, uni.upx2px(820), 80)
ctx.setFillStyle('#9A9A9A')
ctx.setFontSize(fontNames)
ctx.textAlign = "left"
ctx.fillText(this.data.produce_bottom, 90, uni.upx2px(840), 80)
ctx.drawImage(this.data.QrImage, uni.upx2px(380), uni.upx2px(730), uni.upx2px(180), uni.upx2px(180))
ctx.draw()
3.保存海报
uni.canvasToTempFilePath({
canvasId: canvasId,
success: (res) => {
that.imageUrl = res.tempFilePath
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: (res) => {
uni.showToast({
title: '保存成功'
})
},
fail() {
uni.showToast({
icon: 'none',
title: '保存名片码失败'
})
}
})
}
})