版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/y_z_w123/article/details/82114700
思路
首先准备好一张图片，本地图片和网络图片均可作为你的背景图小程序目前不支持截屏，这里讲解本地图片。
会用到 wx.createCanvasContext(#获取画布的id)、
drawImage(#将图片画到背景图上)、
setFillStyle(#设置字体的颜色)、
setFontSize(#字体大小)、
fillText(#设置你所需的文字)、
draw(#保存画好的图片)、
wx.canvasToTempFilePath(#保存图片路径)、
wx.saveImageToPhotosAlbum(#保存图片到手机相册)
详细的请移步微信小程序官方文档
第一步
wxml 准备画布
<canvas class='ce' canvas-id="myCanvas" >先设置画布样式展示出来</canvas>
<button bindtap="conceals">分享图</button>第二步
js 进行点击触发
解释：this.data.qr 是data{}里面的数据
conceals: function () {
//获取画布
const cts = wx.createCanvasContext('myCanvas')
cts.drawImage(this.data.back, 5, 5, 600, 450)
cts.setFontSize(14)
cts.setFillStyle("#606D80")
cts.fillText('周围物体'+':'+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);
// 画图完成进行保存图片路径
var that = this
cts.draw(false,function(){
wx.canvasToTempFilePath({
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath)
if (!res.tempFilePath){
wx.showModal({
title: '提示',
content: '图片绘制中，请稍后重试',
showCancel: false
})
}
//图片路径保存后在下载到本地
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success:function(res){
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
setTimeout(function () {
console.log(res)
wx.hideLoading()
}, 3000)
},
fail:function(err){
console.log(err)
wx.hideLoading()
}
})
}
}, this)
})
},fileText绘制文本自动换行
即粘即用
var text = "这是要绘制的文本"//这是要绘制的文本
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-- 是为了防止字符丢失，
row.push(temp);
temp = "";
}
}
row.push(temp);
//如果数组长度大于2 则截取前两个
//2取前两行3取前三行
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] + "..."//这里只显示两行，超出的用...表示
rowCut.splice(2, 2, group);//1,1在第二行开始有省略号。2,2在第三行有省略号
row = rowCut;
}
for (var b = 0; b < row.length; b++) {
cts.fillText(row[b], 5, 330 + b * 30);
}