這種生成圖片的效果是很常見的，實現起來也不難，跟原生js的差不多。需要注意的就是canvas標籤上不要加太多的css，後果呢就是導致canvas不顯示，還有呢就是canvas組件的優先級是最高的，所以會覆蓋掉下面的所有內容，解決方法呢就是使用：
使用上面這兩個組件是可以蓋在canvas上面的。
注意：canvas繪製不支持網絡圖片，需要將網絡圖片保存成本地圖片
onLoad: function(options) {
var grade = options.grade;
this.setData({
grade: grade
})
this.loading();
},
//檢測，網絡圖片是否下載完成
loading: function() {
var _this = this;
wx.showLoading({
title: '生成中...',
})
timer = setInterval(function() {
var avatarUrl = _this.data.avatarUrl;
var qc_code = _this.data.qc_code;
if (avatarUrl != null && qc_code != null) {
wx.hideLoading();
clearInterval(timer);
_this.draw();
}
}, 500)
},
//保存到相冊
saveImage: function() {
var imagePath = this.data.imagePath;
wx.saveImageToPhotosAlbum({
filePath: imagePath,
success: function(res) {
console.log(res)
},
fail: function(res) {
console.log(res)
}
})
},
//將用戶頭像下載爲本地路徑
downImage: function(img) {
var _this = this;
wx.getImageInfo({
src: img,
success: function(res) {
console.log(res.path)
_this.setData({
avatarUrl: res.path
})
}
})
},
//下載小程序二維碼
downImage2: function (img) {
var _this = this;
wx.getImageInfo({
src: img,
success: function (res) {
console.log(res.path)
_this.setData({
qc_code: res.path
})
}
})
},
//生成canvas圖片
draw: function() {
var _this = this;
var context = wx.createCanvasContext('firstCanvas');
var userInfo = wx.getStorageSync('userInfo');
var award ;
// 性別
var gender = userInfo.gender;
//背景圖片
var bg = '../../images/icon-cj.png';
//得分
var grade = 0 ^ _this.data.grade;
var width;
var height;
if (grade >= 0 && grade <= 30) {
if(gender == 2){
award = '../../images/zbzxlp.png';
}else{
award = '../../images/zbzxlg.png';
}
}else if(grade >= 31 && grade <= 60){
if (gender == 2) {
award = '../../images/zklp.png';
} else {
award = '../../images/zklg.png';
}
} else if (grade >= 61 && grade <= 80){
if (gender == 2) {
award = '../../images/zmlp.png';
} else {
award = '../../images/whlg.png';
}
}else{
if (gender == 2) {
award = '../../images/wmlp.png';
} else {
award = '../../images/wmlg.png';
}
}
if (award == '../../images/zbzxlp.png' || award == '../../images/zbzxlg.png'){
width = 156;
height= 25;
}else{
width = 103;
height = 25;
}
//二維碼
var qc_code = _this.data.qc_code;
// 用戶頭像
var avatarUrl = _this.data.avatarUrl;
//獲取設備的基本信息
wx.getSystemInfo({
success: function(res) {
//繪製背景圖
context.drawImage(bg, 0, 0, 350, 468);
// 繪製獎項
context.drawImage(award,180 - (width / 2),212 - (height / 2),width,height);
//繪製二維碼
context.drawImage(qc_code, 175 - (92 / 2), 385 - (108 / 2), 92, 107);
//繪製得分
context.setFontSize(28); //字體大小
context.fillStyle = '#4fc089';
context.setTextAlign('center')
context.fillText(grade, 177, 48)
// 繪製姓名
context.setFontSize(16);
context.fillStyle = '#000000';
context.setTextAlign('center')
context.fillText(userInfo.nickName, 167, 180);
// 繪製頭像
context.drawImage(avatarUrl, 72, 157, 33, 33);
context.draw(false, function() {
setTimeout(function() {
wx.canvasToTempFilePath({
width: 350,
height: 468,
destWidth: 700,
destHeight: 936,
canvasId: 'firstCanvas',
success: function(res) {
var tempFilePath = res.tempFilePath;
console.log("圖片"+tempFilePath);
_this.setData({
imagePath: tempFilePath,
isCanvas: true
});
_this.upload(tempFilePath);
},
fail: function(res) {
console.log(res);
}
});
}, 1000);
});
},
})
},
因爲我的項目需要，我上面做個很多判斷，那些東西不需要管，重點就是，繪製圖片drawimage方法 和繪製文字的方法，
我的繪製方法是讓他們根據canvas上的一個座標點居中繪製的，這個可以看一下。
還有就是，生成圖片的尺寸要比畫的尺寸大一倍，這樣圖片不會失真，比較清楚，也就是這個方法：
wx.canvasToTempFilePath() 前兩個參數是canvas的大小，然後是生成圖片的大小，canvas的ID