首选说一下需求，做一个小程序分享，但是封面图要自定义，除了要有对应商品还有有背景图，商品名。类似这种
实现逻辑，把商品图和背景图，再加上价格和商品名用canvas 渲染出来
这是弄好之后的效果图，里面的背景色和商品图还有商品名称，价格这些可以自定义
具体实现步骤
1，写一个 canvas标签，写好对应的canvas-id="myCanvas" ,设置宽高
2，这个主要是有图片文字组成，图片渲染到canvas的话我们需要先转成bese64,完成之后在工具上就可以到了，但是这个时候真机是看不到的，需要我们把base64数据通过wx.getFileSystemManager方法写入一下，这样真机就可以访问了
3，写好之后我们就可以写入文字调整对应的位置就可以了
好了下面开始吧，本来想直接沾全部代码的，后面想想还是一步一步来，只要一步一步调试好，基本不会出问题了，好了，下面开始
1，我们要想做这么图的话，因为是动态的，所以这里的图片我们要用canvas画出来
定义一个canvas标签
<canvas canvas-id="myCanvas" style="width: 508.47rpx; height: 406.78rpx;position: fixed;left: -800px;"></canvas>
注意这里fixed;left: -800px; 在调试阶段可以去掉要不然看不到效果图了
2，定义好标签后我们就需要给他画出来，首先我们画canvas的话需要用本地图，或者用base64
因为我们商品图都是动态的所以这里只能用base64，我们需要在画图之前先把我们需要渲染的图片改成base64数据
urlTobase64(url) {
console.log('ruw', url)
wx.request({
url: url,
responseType: 'arraybuffer', //最关键的参数，设置返回的数据格式为arraybuffer
success: res => {
//把arraybuffer转成base64
let base64 = wx.arrayBufferToBase64(res.data);
//不加上这串字符，在页面无法显示的哦
base64 = 'data:image/jpeg;base64,' + base64
// this.lineBg = base64
this.writecommodityImg(base64)
//打印出base64字符串，可复制到网页校验一下是否是你选择的原图片呢
// console.log('base64=>', this.lineBg)
console.log('kais')
const ctx = uni.createCanvasContext('myCanvas', this); // 获取 Canvas 上下文
// 绘制背景图像
let bg ="data:image/png;base64,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"
this.writebgImg(bg)
ctx.drawImage(this.canvasImg.bgimgPath, 0, 0, 264, 215);
// 绘制商品图
ctx.drawImage(this.canvasImg.commodityimgPath, 20, 22, 90, 100); // 商品图
// 添加商品名称
ctx.setFontSize(18);
ctx.setFillStyle('#000000');
// this.productDetail.proName
// ctx： 画布的上下文环境
// content： 需要绘制的文本内容
// drawX： 绘制文本的x坐标
// drawY： 绘制文本的y坐标
// lineHeight：文本之间的行高
// lineMaxWidth：每行文本的最大宽度
// lineNum：最多绘制的行数
// */
this.textPrewrap(ctx, this.productDetailbox.proName, 115, 40, 25, 115, 2)
// this.textPrewrap(ctx, '测试风收到回复肯德基福克斯等哈开发手打开发机三打哈登记说法凯撒代发', 115, 40, 25, 115, 2)
// ctx.fillText('测试风收到回复肯德基福克斯等哈开发手打开发机三打哈登记说法凯撒代发', 200,50, 140);
// 添加商品价格
// ctx.setFontSize(22);
ctx.setFillStyle('#FF0000');
// this.productDetail.price
ctx.font = 'normal bold 26px Arial,sans-serif '
ctx.fillText('￥' + this.productDetail.price, 115, 120, 200, 70);
// 绘制完成并导出图片
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: (res) => {
console.log(res.tempFilePath); // res.tempFilePath 就是生成的图片路径
this.tempFilePath=res.tempFilePath
// this.uploadbgImg(res.tempFilePath)
// 这里可以将 res.tempFilePath 返回给调用方或者保存到本地
},
fail: (res) => {
console.error(res);
}
}, this);
});
}
})
},
这里的urlTobase64(url) url是你的远程图片路径，通过arrayBufferToBase64他会返回你一个base64数据
//把arraybuffer转成base64
let base64 = wx.arrayBufferToBase64(res.data);
转入成功后我们在把图片渲染到 canvas之前需要把base64写入一下
跟这个一样，你只需要换一下里面的base64数据就行，需要注意的是一个他好像不能循环利用，一个图片你要单独写一个方法进入写入
写入方法：
writebgImg(data){
const base64 = data; //base64格式图片
const time = new Date().getTime();
//USER_DATA_PATH：文件系统中的用户目录路径 (本地路径)
const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "" + ".png";
const imageData = base64.replace(/^data:image\/\w+;base64,/, "");
const file = wx.getFileSystemManager();
file.writeFileSync(imgPath, imageData, "base64");
this.canvasImg.bgimgPath=imgPath
console.log('imgPath',this.canvasImg.bgimgPath);
//imgPath就是图片在本地的地址
//如需保存至本地
// wx.saveImageToPhotosAlbum({
// filePath: imgPath,
// success: (res) => {
// wx.showModal({
// title: '照片已保存至相册',
// content: '快去分享给小伙伴吧',
// confirmText: '我知道了',
// showCancel: false,
// })
// }
// })
},
方法里面什么都不用改，他会正常给你返回一个真机可读取的路径
// 商品图
writecommodityImg(data){
const base64 = data; //base64格式图片
const time = new Date().getTime();
//USER_DATA_PATH：文件系统中的用户目录路径 (本地路径)
const imgPath = wx.env.USER_DATA_PATH + "/poster" + time + "" + ".png";
const imageData = base64.replace(/^data:image\/\w+;base64,/, "");
const file = wx.getFileSystemManager();
file.writeFileSync(imgPath, imageData, "base64");
this.canvasImg.commodityimgPath=imgPath
console.log('imgPath',this.canvasImg.commodityimgPath);
},
写入完之后你就可以渲染对应的图片数据了，根据你对应的位置和大小进行修改就可以了
// 绘制商品图ctx.drawImage（图片渲染路径，x轴位置，y轴位置，宽，高）
ctx.drawImage(this.canvasImg.commodityimgPath, 20, 22, 90, 100); // 商品图
文字也一样
ctx.fillText('￥' + this.productDetail.price, 115, 120, 200, 70);
但是如果文字是商品名称你又想设置换行可以根据我下面这个方法来
this.textPrewrap(ctx, this.productDetailbox.proName, 115, 40, 25, 115, 2)
我这个方法是在urlTobase64里渲染的时候用到的，就是你在渲染文字的地址换成这个方法就行
// this.productDetail.proName
// ctx： 画布的上下文环境
// content： 需要绘制的文本内容
// drawX： 绘制文本的x坐标
// drawY： 绘制文本的y坐标
// lineHeight：文本之间的行高
// lineMaxWidth：每行文本的最大宽度
// lineNum：最多绘制的行数
下面是对应方法
textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
var drawTxt = ''; // 当前绘制的内容
var drawLine = 1; // 第几行开始绘制
var drawIndex = 0; // 当前绘制内容的索引
// 判断内容是否可以一行绘制完毕
if (ctx.measureText(content).width <= lineMaxWidth) {
ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
} else {
for (var i = 0; i < content.length; i++) {
drawTxt += content[i];
if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
if (drawLine >= lineNum) {
ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
break;
} else {
ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
drawIndex = i + 1;
drawLine += 1;
drawY += lineHeight;
drawTxt = '';
}
} else {
// 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
if (i === content.length - 1) {
ctx.fillText(content.substring(drawIndex), drawX, drawY);
}
}
}
}
},
最后绘制并导出就好了
// 绘制完成并导出图片
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: 'myCanvas',
success: (res) => {
console.log(res.tempFilePath); // res.tempFilePath 就是生成的图片路径
this.tempFilePath=res.tempFilePath
// this.uploadbgImg(res.tempFilePath)
// 这里可以将 res.tempFilePath 返回给调用方或者保存到本地
},
fail: (res) => {
console.error(res);
}
}, this);
});
在对应分享页面设置图片就OK了
onShareAppMessage() {
// console.log(this.tempFilePath)
return {
title:'Hi，这个商品不错，分享给你',
path: '/pages/index/index',
imageUrl: this.tempFilePath, //背景图
success: function() {
uni.showToast({
title: '分享成功',
icon: 'success'
});
},
fail: function() {
uni.showToast({
title: '分享失败',
icon: 'none'
});
}
}
},
有问题随时滴滴。。。