⼩程序之⽣成图⽚分享朋友圈
通过社交软件分享的⽅式来进⾏营销，是⼀个常⽤的运营途径。⼩程序本⾝⽀持直接将⼀个⼩程序的链接卡⽚分享⾄好友或，然后别⼈就可以通过点击该卡⽚进⼊该⼩程序页⾯。但是⼩程序⽬前不⽀持直接分享到朋友圈，⽽对我们来说，朋友圈⼜是⼀个很重要的吸引别⼈关注的⼊⼝，所以，得想办法把这个资源利⽤起来。
可能有的⼈已经知道，⼩程序⽀持通过扫描/长按识别⼆维码或⼩程序码图⽚的⽅式进⼊⼀个⼩程序⾸页或⼩程序中某个特定页⾯（如何⽣成这类常规⼆维码、⼩程序码，可参考《⼩程序之⽣成⾃定义参数⼩程序⼆维码》这篇⽂章），我们可以将⼆维码或⼩程序码分享到朋友圈去。
不过，这种⼆维码看起来⽐较单调，不太感⼈！
为了提升吸引⼒，我们可以把这种⽤于分享出去的⼆维码图⽚做的尽量美观、有情景感⼀些，⽐如像腾讯出品的⼩程序《长城你造不造》⾥⽣成的这种分享图⽚：
这种配有图⽂的图⽚，就⽐单单给⼀个硬邦邦的⼆维码要吸引⼈得多啦！你是不是也想试试做这种分享图呢？我们今天就来讨论⼀下如何实现这样的分享图。
实现这种合并图⽂的⽅案，选择⽆外乎就是在前端做还是在后端做。如果在后端做的话，可选的技术⽅
案还是挺多的，各种后端语⾔都有⾃⼰的绘图⼯具库，⽐如nodejs⾥可以⽤node-canvas来做，或者也可以通过调⽤⼀些图⽚编辑软件（如ImageMagic）来实现。
⽽在前端做的话，由于⼩程序也提供了⼀系列基于canvas的绘图相关API，所以绘制这样的图⽚还是⽐较简单易上⼿的，且调试起来也⽐较⽅便直观。所以，决定先在⼩程序前端这边来实现了。
添加画布
⾸先，在⼩程序⾥进⾏绘图操作需要⽤到组件，那我们就先在我们的wxml代码中放⼊如下的：
1. <canvas< span=""> canvas-id="shareCanvas" >
这样⼀来我们就有了⼀个600x900的绘图区域。然后，我们要开始写JS代码在这张画布上进⾏绘图操作。
步骤1：绘制背景图
通过观察《长城你造不造》合成的那张分享图，我们可以分析得出它的组成主要有以下3个部分：⼀张⼤的背景图，⼀段动态的⽂字（xxxx 喊你“⼀起来为修长城献砖”），以及⼀个⼩程序码图⽚。
那么我们就先⼀张图⽚来当做背景图，将它画到画布上去，代码⼤致如下：
//这是⼀个封装好的⽅法
promisify: api => {
return (options, ...params) => {
return new Promise((resolve, reject) => {
const extras = {
success: resolve,
fail: reject
}
api({ ...options, ...extras }, ...params)
})
}
}
const wxGetImageInfo = ImageInfo)
wxGetImageInfo({
src: 'some-domain/bg.png'
}).then(res => {
const ctx = wx.createCanvasContext('shareCanvas')
ctx.drawImage(res.path, 0, 0, 600, 900)
ctx.draw()
})
在这段代码中，我们通过使⽤wx.getImageInfo这个API来下载⼀个⽹络图⽚到本地（并可获取该图⽚的尺⼨等其他信息），然后调⽤
ctx.drawImage⽅法将图⽚绘制到画布上，填满画布。
步骤2：绘制⽂字
接着，让我们来在画布上继续绘制⼀段⽂字，⼀般这种宣传⽤的分享图，少不了⽂字描述，⽽且可能是根据场景内容不同⽽产⽣的动态信息，⽐如可能是⼀篇⽂章的作者、⽂章的标题和内容。
我们尝试下在画布上添加⼀段居中显⽰的⽂字：“作者：张杰”，还是基于前⾯的那段代码接着写：
const wxGetImageInfo = ImageInfo)
wxGetImageInfo({
src: 'some-domain/bg.png'
}).then(res => {
const ctx = wx.createCanvasContext('shareCanvas')
// 底图
ctx.drawImage(res.path, 0, 0, 600, 900)
// 作者名称
ctx.setTextAlign('center')    // ⽂字居中
ctx.setFillStyle('#000000')  // ⽂字颜⾊：⿊⾊
ctx.setFontSize(22)        // ⽂字字号：22px
ctx.fillText(“作者：张杰”, 600 / 2, 500)
ctx.stroke()
ctx.draw()
})
由于在canvas上绘制⽂字不会⾃动折⾏，如果要画⼀段⽐较长的⽂本，可以考虑限制⼀⾏的字数，将长⽂本拆分成⼏⾏来画。
步骤3：绘制⼩程序码
最后，我们在画布最后添加⼀个⼩程序码，可以是静态的⼩程序码，也可以是⽐如为每⼀篇⽂章动态⽣成的⼩程序码（参考《⼩程序之⽣成⾃定义参数⼩程序⼆维码》这篇⽂章），反正这个⼩程序
码也就是⼀张图⽚，所以绘制⽅法跟绘制底图差不多。最后的代码类似如此：
const wxGetImageInfo = ImageInfo)
Promise.all([
wxGetImageInfo({
src: 'some-domain/background.png'
}),
wxGetImageInfo({
src: 'some-domain/api/generate/qrcode'
})
]).then(res => {
const ctx = wx.createCanvasContext('shareCanvas')
/
/ 底图
ctx.drawImage(res[0].path, 0, 0, 600, 900)
// 作者名称
ctx.setTextAlign('center')    // ⽂字居中
ctx.setFillStyle('#000000')  // ⽂字颜⾊：⿊⾊
ctx.setFontSize(22)        // ⽂字字号：22px
ctx.fillText(“作者：张杰”, 600 / 2, 500)
// ⼩程序码
const qrImgSize = 180
ctx.drawImage(res[1].path, (600 - qrImgSize) / 2, 530, qrImgSize, qrImgSize)
ctx.stroke()
ctx.draw()
})
这样，差不多我们的分享图就⽣成好了。
保存到系统相册
接着，我们要把它保存进⽤户的系统相册中去，实现这个功能，我们主要靠wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum这两个API。
主要的流程就是先通过wx.canvasToTempFilePath将上绘制的图像⽣成临时⽂件的形式，然后再通过wx.saveImageToPhotosAlbum进⾏保存到系统相册的操作。
//保存海报
saveImageToPhoto: function () {
var that = this;
setTimeout(function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 200,
height: 370,
destWidth: 1035,
destHeight: 1560,
canvasId: 'share_canvas',
success: function (res) {
console.log(res, '保存')
that.setData({
savedImgUrl: pFilePath
})
}
})
}, 1000)
setTimeout(function () {
if (that.data.savedImgUrl != "") {
wx.saveImageToPhotosAlbum({
filePath: that.data.savedImgUrl,
success: function () {
wx.showModal({
title: '保存图⽚成功',
content: '图⽚已经保存到相册，快去炫耀吧！',
showCancel: false,
success: function (res) {
that.setData({
canvasShow: false,
})
},
fail: function (res) { },
complete: function (res) { },
});
},
fail: function(res) {
console.log(res);
if (Msg == "saveImageToPhotosAlbum:fail cancel") {
wx.showModal({
title: '保存图⽚失败',
content: '您已取消保存图⽚到相册！',
showCancel: false
});
} else {
wx.showModal({
title: '提⽰',
content: '保存图⽚失败，您可以点击确定设置获取相册权限后再尝试保存！', complete: function(res) {
console.log(res);
if (firm) {
wx.openSetting({}) //打开⼩程序设置页⾯，可以设置权限
} else {
wx.showModal({
title: '保存图⽚失败',
content: '您已取消保存图⽚到相册！',
showCancel: false
});
}
}
});
写文章的小程序
}
}
})
}
}, 1500)
},
根据业务需求可以选择（下载图⽚并且显⽰下载进度），
if (res.progress === 100) {
this.setData({
progress: ''
});
} else {
this.setData({
progress: res.progress + '%'
});
}
以上就是在⼩程序⾥合成⼀个朋友圈分享⽤的⼩程序推⼴图⽚的简要流程了！更多⼩程序内容请关注我的主页~~~~~~~~~~~~~~~~~~~~~~~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。