This kind of image generation effect is very common, and it's not difficult to implement. It's similar to native js. It should be noted that there should not be too many css on the canvas label. The consequence is that the canvas does not display. In addition, the priority of the canvas component is the highest, so all the following contents will be covered. The solution is to use:
These two components can be used to cover the canvas.
Note: canvas drawing does not support network pictures. You need to save the network pictures as local pictures
onLoad: function(options) {
var grade = options.grade;
this.setData({
grade: grade
})
this.loading();
},
//Check whether the network pictures are downloaded
loading: function() {
var _this = this;
wx.showLoading({
title: 'In generation...',
})
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)
},
//Save to album
saveImage: function() {
var imagePath = this.data.imagePath;
wx.saveImageToPhotosAlbum({
filePath: imagePath,
success: function(res) {
console.log(res)
},
fail: function(res) {
console.log(res)
}
})
},
//Download user image as local path
downImage: function(img) {
var _this = this;
wx.getImageInfo({
src: img,
success: function(res) {
console.log(res.path)
_this.setData({
avatarUrl: res.path
})
}
})
},
//Download applet QR code
downImage2: function (img) {
var _this = this;
wx.getImageInfo({
src: img,
success: function (res) {
console.log(res.path)
_this.setData({
qc_code: res.path
})
}
})
},
//Generate canvas picture
draw: function() {
var _this = this;
var context = wx.createCanvasContext('firstCanvas');
var userInfo = wx.getStorageSync('userInfo');
var award ;
// Gender
var gender = userInfo.gender;
//Background picture
var bg = '../../images/icon-cj.png';
//Score
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;
}
//QR code
var qc_code = _this.data.qc_code;
// User head
var avatarUrl = _this.data.avatarUrl;
//Get basic information of the device
wx.getSystemInfo({
success: function(res) {
//Draw background
context.drawImage(bg, 0, 0, 350, 468);
// Drawing Awards
context.drawImage(award,180 - (width / 2),212 - (height / 2),width,height);
//Draw QR code
context.drawImage(qc_code, 175 - (92 / 2), 385 - (108 / 2), 92, 107);
//Draw score
context.setFontSize(28); //font size
context.fillStyle = '#4fc089';
context.setTextAlign('center')
context.fillText(grade, 177, 48)
// Name drawing
context.setFontSize(16);
context.fillStyle = '#000000';
context.setTextAlign('center')
context.fillText(userInfo.nickName, 167, 180);
// Drawing head
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("picture"+tempFilePath);
_this.setData({
imagePath: tempFilePath,
isCanvas: true
});
_this.upload(tempFilePath);
},
fail: function(res) {
console.log(res);
}
});
}, 1000);
});
},
})
},Because of the needs of my project, I made a lot of judgments above. Those things don't need to be managed. The point is to draw pictures and draw text,
My drawing method is to let them draw according to the center of a coordinate point on canvas. This can be seen.
In addition, the size of the generated image should be twice the size of the drawing, so that the image will not be distorted and clear, that is, this method:
The first two parameters of Wx. Canvas to tempfilepath() are the size of canvas, then the size of the generated image and the ID of canvas