微信小程序利用canvas生成海报分享图片
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序利用canvas生成海报分享图片，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5378字，纯文字阅读大概需要8分钟。
内容图文
一 . 效果
这是借用女神照生成的分享的海报，图片来自网络。
新增了poster组件和更新图片自适应
二 . 准备
准备两张图片连接，最好是自己开发账号验证的https图片链接。
三 . 实现思路
其实就是canvas实现方式，首先要就是定义一个canvas容器，把容器放在中间，图片也要动态计算大小居中，显示下面的文字和二维码也是要根据容器动态去改变，这就是大概的实现思路。
四 . 实现代码
利用微信小程序canvas生成海报分享图片，这个生成图片排版和适配不同尺寸的手机是一个难点，特别是图片适应问题，我处理的方法是动态获取容器的宽度进行适应就是利用微信API wx.createSelectorQuery(),不知道还有没有更好的办法可以请教。
1.下载头像
为了确保图片下载完成之后，再回调其它方法执行下一步。
getAvaterInfo: function (cardInfo) {//cardInfo是传入的信息参数，按实际需要。
wx.showLoading({ title: ‘生成中...‘,mask: true,});
var that = this;
if (cardInfo.CardInfo.Avater) {
wx.downloadFile({
url: ‘图片路径‘,
success: function (res) {
wx.hideLoading();
if (res.statusCode === 200) {
var avaterSrc = res.tempFilePath;
that.getQrCode(avaterSrc, cardInfo);
}else{
wx.showToast({
title: ‘头像下载失败！‘,
icon:‘none‘,
duration: 2000,
success:function(){
that.getQrCode(avaterSrc = "", cardInfo);//回调另一个图片下载
}
})
}
}
})
} else {
wx.hideLoading();
that.getQrCode(avaterSrc = "", cardInfo);//回调另一个图片下载
}
},
2.下载二维码
二维码下载一样的道理，就是先下载完成，再进行绘图。
getQrCode: function (avaterSrc, cardInfo) {
wx.showLoading({ title: ‘生成中...‘, mask: true, });
var that = this;
if (cardInfo.CardInfo.QrCode) {
wx.downloadFile({
url: cardInfo.CardInfo.QrCode,
success: function (res) {
wx.hideLoading();
if (res.statusCode === 200) {
var codeSrc = res.tempFilePath;
that.sharePosteCanvas(cardInfo, avaterSrc, codeSrc);//真正的绘图方法
} else {
wx.showToast({
title: ‘二维码下载失败！‘,
icon: ‘none‘,
duration: 2000,
success: function () {
var codeSrc = "";
that.sharePosteCanvas(cardInfo, avaterSrc, codeSrc);//真正的绘图方法
}
})
}
}
})
} else {
wx.hideLoading();
var codeSrc = "";
that.sharePosteCanvas(cardInfo, avaterSrc, codeSrc);//真正的绘图方法
}
},
3.绘制分享海报
这里才是canvas实现绘制的过程
sharePosteCanvas: function (cardInfo, avaterSrc, codeSrc) {
wx.showLoading({
title: ‘生成中...‘,
mask: true,
})
var that = this;
const ctx = wx.createCanvasContext(‘myCanvas‘);
var width = "";
wx.createSelectorQuery().select(‘#canvas-container‘).boundingClientRect(function (rect) {
var height = rect.height;
var right = rect.right;
width = rect.width * 0.8;
var left = rect.left + 5;
ctx.setFillStyle(‘#fff‘);
ctx.fillRect(0, 0, rect.width, height);
//头像
if (avaterSrc) {
ctx.drawImage(avaterSrc, left, 20, width, width);
ctx.setFontSize(14);
ctx.setFillStyle(‘#fff‘);
ctx.setTextAlign(‘left‘);
}
if (cardInfo.TagList.length > 0) {
ctx.fillText(cardInfo.TagList[0].TagName, left + 20, width - 4); //标签
const metrics = ctx.measureText(cardInfo.TagList[0].TagName); //测量文本信息
ctx.stroke();
ctx.rect(left + 10, width - 20, metrics.width + 40, 25);
ctx.setFillStyle(‘rgba(255,255,255,0.4)‘);
ctx.fill();
}
if (cardInfo.CardInfo.Name) {
ctx.setFontSize(14);
ctx.setFillStyle(‘#000‘);
ctx.setTextAlign(‘left‘);
ctx.fillText(cardInfo.CardInfo.Name, left, width + 60); //姓名
}
if (cardInfo.CardInfo.Position) {
ctx.setFontSize(12);
ctx.setFillStyle(‘#666‘);
ctx.setTextAlign(‘left‘);
ctx.fillText(cardInfo.CardInfo.Position, left, width + 85); //职位
}
if (cardInfo.CardInfo.Mobile) {
ctx.setFontSize(12);
ctx.setFillStyle(‘#666‘);
ctx.setTextAlign(‘left‘);
ctx.fillText(cardInfo.CardInfo.Mobile, left, width + 105); //电话
}
if (cardInfo.CardInfo.Company) {
// 公司名称
const CONTENT_ROW_LENGTH = 24; // 正文 单行显示字符长度
let [contentLeng, contentArray, contentRows] = that.textByteLength(cardInfo.CardInfo.Company, CONTENT_ROW_LENGTH);
ctx.setTextAlign(‘left‘);
ctx.setFillStyle(‘#000‘);
ctx.setFontSize(10);
let contentHh = 22 * 1;
for (let m = 0; m < contentArray.length; m++) {
ctx.fillText(contentArray[m], left, width + 150 + contentHh * m);
}
}
// 绘制二维码cardInfo.CardInfo.QrCode
if (codeSrc) {
ctx.drawImage(codeSrc, left + 150, width + 40, width / 3, width / 3)
ctx.setFontSize(10);
ctx.setFillStyle(‘#000‘);
ctx.setTextAlign(‘right‘);
ctx.fillText("微信扫码或长按识别", left + 235, width + 150);
}
}).exec()
setTimeout(function () {
ctx.draw(); 这里有个需要注意就是，这个方法是在绘制完成之后在调用，不然容易其它被覆盖。
wx.hideLoading();
}, 1000)
},
4.多行显示文字
这个函数就是需要多行显示文字的时候进行折行，就是切分为数组。
textByteLength(text, num) { // text为传入的文本 num为单行显示的字节长度
let strLength = 0; // text byte length
let rows = 1;
let str = 0;
let arr = [];
for (let j = 0; j < text.length; j++) {
if (text.charCodeAt(j) > 255) {
strLength += 2;
if (strLength > rows * num) {
strLength++;
arr.push(text.slice(str, j));
str = j;
rows++;
}
} else {
strLength++;
if (strLength > rows * num) {
arr.push(text.slice(str, j));
str = j;
rows++;
}
}
}
arr.push(text.slice(str, text.length));
return [strLength, arr, rows] // [处理文字的总字节长度，每行显示内容的数组，行数]
},
5.保存绘制生成图片
这一步就是最后把canvas生成图片了，大功告成。
//点击保存到相册
saveShareImg: function () {
var that = this;
wx.showLoading({
title: ‘正在保存‘,
mask: true,
})
setTimeout(function () {
wx.canvasToTempFilePath({
canvasId: ‘myCanvas‘,
success: function (res) {
wx.hideLoading();
var tempFilePath = res.tempFilePath;
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(res) {
wx.showModal({
content: ‘图片已保存到相册，赶紧晒一下吧~‘,
showCancel: false,
confirmText: ‘好的‘,
confirmColor: ‘#333‘,
success: function (res) {
if (res.confirm) { }
},
fail: function (res) { }
})
},
fail: function (res) {
wx.showToast({
title: res.errMsg,
icon: ‘none‘,
duration: 2000
})
}
})
}
});
}, 1000);
},
五 . 填坑
1.图片要提前下载
这里面还有一个问题就是，图片要提前下载完之后再绘图，不然图片显示不出来，可以把下载图片的方法单独拎出来，然后下载图片后回调绘图方法。
- ctx.draw()
这个方法是在绘制完成之后在调用，不然容易其它被覆盖。
这样就大功告成了，有问题可以和联系作者，一起进步。
喜欢就点点喜欢鼓励
DEMO路径：https://github.com/kingbuwu/poster
demo上封装了poster组件和显示头图图片自适应
原文：https://www.cnblogs.com/yehuisir/p/10800135.html
内容总结
以上是互联网集市为您收集整理的微信小程序利用canvas生成海报分享图片全部内容，希望文章能够帮你解决微信小程序利用canvas生成海报分享图片所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。