微信小程序制作海报
近期使用微信小程序制作海报，为了减少各位同学们少走弯路，记录一下吧。
首先我们需要了解一个知识点canvas,另一个知识点，在使用网络图片绘制海报的时候，canvas是不能显示的，这个时候我们就需要使用小程序的API了，
两种方式,第一:wx.getImageInfo获取图片信息，根据临时的path进行绘制，第二种就是通过wx.downloadFile先下载再进行绘制，这里我选第一种方式。
我们在绘制的时候会遇到兼容性问题，这个时候我们就要使用微信小程序的另一个方法wx.getSystemInfo获取手机的基本信息，根据不同分辨率的手机
计算出不同的尺寸比例，然后再绘制图片文字所有海报的信息，最后我们使用wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum将canvas
转化成图片保存在本地。
废话不多说，直接上代码
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
bgImage: 'https://******/*.img',
cardImage: '',
userImage: '',
codeImage: '',
name: '示例员工',
job: '员工',
company: '公司名称',
remark: 'TT·全球版',
sub: '长按识别二维码',
type: 'user',
title: '',
card_id: ''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('oooo', options);
wx.showLoading({
title: '海报生成中',
mask: true,
});
if (options.type == 'case' || options.type == 'product') {
this.setData({
remark: options.name.length > 6 ? options.name.substring(0, 6)+'...' : options.name
})
}
let cardInfo = app.data.card_info;
console.log(cardInfo);
this.data.name = cardInfo.card_name;
this.data.job = cardInfo.job;
this.data.company = cardInfo.company;
this.data.userImage = cardInfo.circular_avatar;
this.data.type = options.type;
this.data.card_id = cardInfo.id;
this.data.title = options.title;
if (options.type) {
this.data.cardImage = options.img;
} else {
this.data.cardImage = cardInfo.card_image;
}
this.bgImg();
},
async bgImg() {
await this.getImage(this.data.bgImage).then(rs => {
this.data.bgImage = rs.path;
});
await this.getImage(this.data.cardImage).then(rs => {
this.data.cardImage = rs.path;
});
await this.getImage(this.data.userImage).then(rs => {
this.data.userImage = rs.path;
});
await this.getCodeImage().then(rs => {
if (rs.code === 200) {
this.getImage(rs.data).then(rs => {
this.data.codeImage = rs.path;
this.drawImag();
});
} else {
app.my_showToast(rs.msg);
console.log(5)
}
});
},
getImage(url) { //获取图片
return new Promise((resolve) => {
wx.getImageInfo({
src: url,
success: function (res) {
resolve(res);
}
})
})
},
getCodeImage() { //获取二维码
return new Promise((resolve) => {
app.ajax({
url: '/***/***/getCode',
data: {
cardId: this.data.card_id,
page: 'pages/business_card/business_card'
},
method: 'POST'
}).then(rs => {
resolve(rs);
})
})
},
drawImag() {
const ctx = wx.createCanvasContext('canvas');
wx.getSystemInfo({
success: (result) => {
let rateW = result.windowWidth / 375;
ctx.drawImage(this.data.bgImage, 0, 0, result.screenWidth, result.screenHeight * 0.9);
ctx.drawImage(this.data.userImage, 145 * rateW, 10 * rateW, 90 * rateW, 90 * rateW);
ctx.textAlign = 'center'
ctx.textBaseline = 'middle'
if (!this.data.type) {
ctx.setFillStyle('#687dc7');
ctx.setFontSize(14);
ctx.fillText('这是我的名片,请您收下,谢谢!', 200 * rateW, 180 * rateW);
ctx.drawImage(this.data.cardImage, 45 * rateW, 200 * rateW, 290 * rateW, 180 * rateW);
ctx.drawImage(this.data.codeImage, 220 * rateW, 390 * rateW, 100 * rateW, 100 * rateW);
} else if (this.data.type == "company") {
ctx.fillStyle = "#f4f4f4";
ctx.fillRect(85 * rateW, 170 * rateW, 200 * rateW, 200 * rateW);
ctx.setFillStyle('#5b5b5b');
let title = this.data.title;
title = title > 10 ? `${title.substring(0,9)}...` : title;
ctx.setFontSize(16);
ctx.fillText(title, 190 * rateW, 355 * rateW);
ctx.drawImage(this.data.cardImage, 95 * rateW, 180 * rateW, 180 * rateW, 160 * rateW);
ctx.drawImage(this.data.codeImage, 140 * rateW, 380 * rateW, 100 * rateW, 100 * rateW);
ctx.setFontSize(16);
ctx.fillText('长按识别二维码', 190 * rateW, 500 * rateW);
} else {
ctx.drawImage(this.data.cardImage, 45 * rateW, 180 * rateW, 290 * rateW, 180 * rateW);
ctx.drawImage(this.data.codeImage, 220 * rateW, 390 * rateW, 100 * rateW, 100 * rateW);
}
ctx.setFontSize(16);
ctx.setFillStyle('#4462bd');
ctx.fillText(this.data.name, 180 * rateW, 120 * rateW)
ctx.setFontSize(12);
ctx.setFillStyle('#666');
ctx.fillText(this.data.job, 240 * rateW, 120 * rateW)
ctx.setFillStyle('#666');
ctx.fillText(this.data.company, 200 * rateW, 140 * rateW);
if (this.data.type == "product" || this.data.type == "case") {
ctx.setFillStyle('#333');
ctx.setFontSize(16)
ctx.fillText(this.data.remark, 100 * rateW, 420 * rateW)
ctx.setFontSize(14)
ctx.setFillStyle('#b1b1b1');
ctx.fillText(this.data.sub, 110 * rateW, 450 * rateW)
} else if (this.data.type == "company") {
} else {
ctx.setFillStyle('#333');
ctx.setFontSize(16)
this.data.remark = "长按或";
this.data.sub = "扫一扫了解TA"
ctx.fillText(this.data.remark, 85 * rateW, 420 * rateW)
ctx.fillText(this.data.sub, 110 * rateW, 450 * rateW)
}
ctx.stroke();
ctx.draw();
wx.hideLoading();
},
});
},
saveImage() {
wx.canvasToTempFilePath({
canvasId: 'canvas',
success: function (res) {
if (res.errMsg === "canvasToTempFilePath:ok") {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
wx.hideLoading();
wx.showToast({
title: '保存成功',
icon: 'success'
})
wx.previewImage({
current: '',
urls: [res.tempFilePath]
})
},
fail(err) {
wx.hideLoading();
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
} else {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
},
fail: function (res) {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
});
},
//检查授权
saveImageToPhotosAlbum() {
const that = this;
wx.getSetting({
success(res) {
//第一次点击保存，是进入下载逻辑，会自动弹框确认
if (res.authSetting['scope.writePhotosAlbum'] || typeof res.authSetting['scope.writePhotosAlbum'] === 'undefined') {
//执行下载
that.saveImage()
} else {
//如果点击过取消，之后就进入设置页面
//打开检查权限
wx.openSetting()
}
},
})
}
})
