thinking
First of all, prepare a picture. Both the local picture and the network picture can be used as your background picture. Currently, the applet does not support screenshots. Here are the local pictures. wx.createCanvasContext(ා get the ID of the canvas) will be used drawImage(ා draw the picture onto the background picture) setFillStyle(ා set font color) setFontSize(ා font size) fillText(ා set the text you need) draw(ා save the picture) wx.canvasToTempFilePath(ා save picture path) wx.saveImageToPhotosAlbum(ා save picture to mobile album) Please move to the official wechat applet file for details
First step
wxml prepare canvas
< canvas class ='ce 'Canvas id = "mycanvas" > set the canvas style to display first < / Canvas > < button bindtap = "conceals" > share graph < / button >
The second step
js click trigger
Explanation: this.data.qr is the data in data {}
conceals: function () {
//Get canvas
const cts = wx.createCanvasContext('myCanvas')
cts.drawImage(this.data.back, 5, 5, 600, 450)
cts.setFontSize(14)
cts.setFillStyle("#606D80")
cts.fillText('Surrounding objects'+':'+this.data.datas[0].tag_name,50,300)
cts.drawImage(this.data.qr, 200, 400, 50, 50);
cts.drawImage(this.data.src, 50, 50, 170, 200);
// Finish drawing and save the picture path
var that = this
cts.draw(false,function(){
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath)
if (!res.tempFilePath){
wx.showModal({
title: 'Tips',
content: 'Drawing picture, please try again later',
showCancel: false
})
}
//After saving the picture path, download it to local
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success:function(res){
wx.showToast({
title: 'Success',
icon: 'success',
duration: 2000
})
setTimeout(function () {
console.log(res)
wx.hideLoading()
}, 3000)
},
fail:function(err){
console.log(err)
wx.hideLoading()
}
})
}
}, this)
})
},
fileText draw text wrap
Namely sticky use
var text = "This is the text to draw"//This is the text to draw
var chr = text.split("")
console.log(chr)
var temp = ""
var row = []
for (var a = 0; a < chr.length; a++) {
if (cts.measureText(temp).width < 250) {
temp += chr[a];
}
else {
a--; //a -- is added here to prevent character loss,
row.push(temp);
temp = "";
}
}
row.push(temp);
//If the array length is greater than 2, the first two are truncated
//2 take the first two lines 3 take the first three lines
if (row.length > 2) {
var rowCut = row.slice(0, 3);
var rowPart = rowCut[1];
var test = "";
var empty = [];
for (var a = 0; a < rowPart.length; a++) {
if (cts.measureText(test).width < 220) {
test += rowPart[a];
}
else {
break;
}
}
empty.push(test);
var group = empty[0] + "..."//Only two lines are shown here. The excess is represented by
rowCut.splice(2, 2, group);//1,1 has an ellipsis at the beginning of the second line. 2,2 with ellipsis on the third line
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
cts.fillText(row[b], 5, 330 + b * 30);
}