近期使用微信小程序制作海報，為了減少各位同學們少走彎路，記錄一下吧。
首先我們需要了解一個知識點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()
}
},
})
}
})