因为微信的限制,小程序无法分享到朋友圈,所有大多数小程序都是采取生成分享海报保存到相册,然后由用户分享到朋友圈,小程序生成海报需要用到canvas
组件。这里已mars小程序
的分享海报为例子,阐述一下实现过程。
生成的mars分享界面
步骤1:添加canvas画布
一般来说会有两个画布,一个画布用于页面中间显示,另外还有一个两倍的画布,在界面之外。保存图片的时候,保存第二个画布里面的内容。这里暂时只写一个画布。
wxml:
wxss:
.canvas-content{
display: flex;
top: 0;
left: 0;
/* left: 500%; 分享图不显示在页面上面,就将画布设置在页面之外*/
}
.save-button {
position: fixed;
width: 80rpx;
height: 80rpx;
bottom: 40rpx;
right: 40rpx;
border-radius: 50rpx;
z-index: 200;
background: rgba(0, 0, 0, 0.75);
}
.save-button .share-image {
position: absolute;
top: 22rpx;
left: 22rpx;
width: 36rpx;
height: 36rpx;
}
步骤2:绘制前准备
/**
* 页面的初始数据
*/
data: {
model: {
topImageUrl: 'http://imgmars.yohobuy.com/mars/2018/05/26/d939c526b9d84e0a16544de381af7d09.jpg',
mallUrl: 'http://www.yohomars.com/admin/images/logo/C.jpg?imageView/1/w/100/h/100',
name: '春丽咖啡公司春丽咖啡公司',
city: '北京',
content: '“春丽咖啡公司”是京城人气很高的“春丽吃饭公司”开的新店,延续了餐厅不走寻常路的装修风格,开在南三里屯路上一个非常本土化的小超市底下,白瓷砖,小木窗,其貌不扬的店面装潢反而让它在洋气的三里屯显得更加与众不同。虽然主打“随性”的风格,但春丽咖啡公司对于咖啡的制作却相当讲究,店里的咖啡豆也是由北京少有的获得 SC 卫生许可证的烘焙师来供应的,包括危地马拉、埃塞俄比亚等等的精品级别的豆子,不论是机器、豆子和牛奶都很有品质,且一天卖完 102 杯就不卖了。但因为店面不大,这里的咖啡只能外带或者坐在门口即饮,想象自己拿着酷似二锅头的瓶子喝着草莓拿铁,非常酷了!',
address: '北京市 朝阳区南三里屯路',
contentImages: [{
image: 'http://imgmars.yohobuy.com/mars/2018/4/26/9ba2ac0468fc769b0d6097e800a133f5.jpg'
},
{
image: 'http://imgmars.yohobuy.com/mars/2018/4/26/ab18f7d32fb94f7d9a275c76439a1982.jpg'
}
],
},
windowWidth: 0,
windowHeight: 0,
totalHeight: 0,
canvasScale: 1.0,// 画布放大的倍数,因为如果保存的是一倍的分享图片的话,分享图会有点虚。所以保存的时候,canvasScale设置为2.0,wxss 里面的left: 500%;打开注释。就可保存两倍的分享图
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
let that = this
// 获取到屏幕的宽高等信息
wx: wx.getSystemInfo({
success: function(res) {
that.setData({
windowWidth: res.windowWidth,
windowHeight: res.windowHeight
})
}
})
},
步骤3 绘制分享海报
/**
* 绘制分享海报
*/
begainDrawShareImage() {
var that = this
// 适配屏幕
let scale = this.data.windowWidth / 375.0
this.setData({ totalHeight: 667* scale})
// 获取Canvas
let ctx = wx.createCanvasContext('myCanvas')
// 放大 因为不放大的话,生成的分享图会模糊。暂时先注释
ctx.scale(this.data.canvasScale, this.data.canvasScale)
// 绘制主背景白色
ctx.setFillStyle('#ffffff')
ctx.fillRect(0, 0, this.data.windowWidth, this.data.totalHeight)
ctx.draw()
// 首先要绘制顶部的背景图片,因为它在最底层,然后才能绘制其他内容
let topImageWidth = parseInt(375 * scale) // 因为小数有时候会请求不到图片,所以转成int
let topImageHeight = parseInt(250 * scale)
let src1 = this.data.model.topImageUrl + `?imageView/2/w/${topImageWidth}/h/${topImageHeight}`
wx.getImageInfo({
src: src1,
success: function(res) {
ctx.drawImage(res.path, 0, 0, topImageWidth, topImageHeight)
// 覆盖黑色蒙层
ctx.setFillStyle('rgba(0,0,0,0.3)')
ctx.fillRect(0, 0, topImageWidth, topImageHeight)
ctx.draw(true)
that.drawOtherContent(ctx, scale)
that.drawOtherImage(ctx,scale)
}
})
},
// 绘制除了图片之外的剩余内容
drawOtherContent(ctx, scale) {
// 绘制中间的灰色背景
ctx.setFillStyle('rgba(246,246,246,1)')
ctx.fillRect(14 * scale, 230 * scale, 347 * scale, 158 * scale)
//name
ctx.setFillStyle('white');
ctx.setFontSize(30 * scale);
this.canvasTextAutoLine(this.data.model.name, ctx, 80 * scale, 220 * scale, 35 * scale, 258 * scale, 1)
// cotent
ctx.setFillStyle('#3c3c3c');
ctx.setFontSize(15 * scale);
this.canvasTextAutoLine(this.data.model.content, ctx, 30 * scale, 270 * scale, 22 * scale, 305 * scale, 4)
// address
ctx.setFillStyle('#dadada');
ctx.setFontSize(15 * scale);
this.canvasTextAutoLine(this.data.model.address, ctx, 30 * scale, 370 * scale, 22 * scale, 305 * scale, 1)
this.drawNormalText(ctx, '探索新鲜好去处', 82 * scale, 596 * scale, 14 * scale, '#3C3C3C', 'left', 'middle', scale);
this.drawNormalText(ctx, '长按右侧小程序码', 82 * scale, 620 * scale, 12 * scale, '#9A9CAC', 'left', 'middle', scale);
this.drawNormalText(ctx, '查看更多店铺信息和热评', 82 *scale,635*scale, 12*scale, '#9A9CAC', 'left', 'middle', scale);
ctx.draw(true)
},
// 绘制剩余图片
drawOtherImage(ctx, scale) {
let that = this
let mallImageWidth = parseInt(57 * scale)
let mallImageHeight = parseInt(57 * scale)
let src1 = this.data.model.mallUrl + `?imageView/2/w/${mallImageWidth}/h/${mallImageHeight}`
wx.getImageInfo({
src: src1,
success: function (res) {
ctx.drawImage(res.path, 20 * scale, 184*scale, mallImageWidth, mallImageHeight)
ctx.draw(true)
}
})
let cotentImageWidth = parseInt(166 * scale)
let cotentImageHeight = parseInt(166 * scale)
for (let i = 0; i < this.data.model.contentImages.length; i++){
let imageItem = this.data.model.contentImages[i]
let src1 = imageItem.image + `?imageView/2/w/${cotentImageWidth}/h/${cotentImageHeight}`
wx.getImageInfo({
src: src1,
success: function (res) {
ctx.drawImage(res.path, 15 * scale + i*180*scale, 400 * scale, cotentImageWidth, cotentImageHeight)
ctx.draw(true)
}
})
}
// icon
// ctx.setShadow(0, 8 * scale, 20, 'rgba(0,0,0,0.1)')
ctx.drawImage('../../img/mars.png', 13 * scale, 590 * scale, 54*scale, 54*scale)
// ctx.setShadow(0, 0, 0, 'white')
ctx.draw(true)
},
// 绘制只有一行的文字
drawNormalText(ctx, str, x, y, font, style, align, baseLine) {
ctx.setFontSize(font);
ctx.setFillStyle(style);
ctx.setTextAlign(align);
ctx.setTextBaseline(baseLine);
ctx.fillText(str, x, y);
},
/*
* 绘制多行文本,自动换行,超出添加...
*
str:要绘制的字符串
canvas:canvas对象
initX:绘制字符串起始x坐标
initY:绘制字符串起始y坐标
lineHeight:字行高,自己定义个值即可
maxWidth: 文本最大宽度
row: 最大行数
*/
canvasTextAutoLine: function(str, ctx, initX, initY, lineHeight, maxWidth, row = 1) {
var lineWidth = 0;
var lastSubStrIndex = 0;
var currentRow = 1;
for (let i = 0; i < str.length; i++) {
lineWidth += ctx.measureText(str[i]).width;
if (lineWidth > maxWidth) {
currentRow++;
let newStr = str.substring(lastSubStrIndex, i)
if (currentRow > row && str.length > i) {
newStr = str.substring(lastSubStrIndex, i - 2) + '...'
}
ctx.fillText(newStr, initX, initY);
initY += lineHeight;
lineWidth = 0;
lastSubStrIndex = i;
if (currentRow > row) {
break;
}
}
if (i == str.length - 1) {
ctx.fillText(str.substring(lastSubStrIndex, i + 1), initX, initY);
}
}
},
步骤4 保存图片
// 保存图片
saveImage(){
let that = this
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: this.data.windowWidth * this.data.canvasScale,
height: this.data.totalHeight * this.data.canvasScale,
canvasId: 'myCanvas',
success: function (res) {
that.saveImageToPhotos(res.tempFilePath);
},
fail: function (res) {
wx.showToast({
title: '图片生成失败',
icon: 'none',
duration: 2000
})
}
})
},
saveImageToPhotos: function (tempFilePath) {
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success(result) {
wx.showToast({
title: '保存成功,从相册中分享到朋友圈吧',
icon: 'none',
duration: 4000
})
},
fail: function (res) {
wx.showToast({
title: '图片保存失败',
icon: 'none',
duration: 2000
})
}
})
},
步骤5 获取小程序码
小程序码如果直接由前端请求微信获取的话,返回的是base64的data数据
,而且在小程序发布之前,传入path
参数的话还会报错。所以最好又后台获取小程序码(参数可控),并且返回给前端一个图片URL,然后就绘制其他图片一样绘制小程序码即可。
最后
生成分享海报遇到最大的一个麻烦是多行文本的绘制,后来用measureText
测长度,然后截断字符串解决的。文中已经封装成了一个方法,直接调用即可。当然这些也可以将生成分享海报的代码写在一个组件当中,写在组件中需要注意两个地方wx.createCanvasContext(canvasId, this)
和 wx.canvasToTempFilePath(OBJECT, this)
后面都需要加上this
。
最后附上demo 地址
)