微信小程序之生成图片分享朋友圈

经过社交软件分享的方式来进行营销小程序，是一个经常使用的运营途径。小程序自己支持直接将一个小程序的连接卡片分享至微信好友或微信群，而后别人就能够经过点击该卡片进入该小程序页面。可是小程序目前不支持直接分享到微信朋友圈，而对咱们来讲，微信朋友圈又是一个很重要的吸引别人关注的入口，因此，得想办法把这个资源利用起来。

可能有的人已经知道，微信小程序支持经过扫描/长按识别二维码或小程序码图片的方式进入一个小程序首页或小程序中某个特定页面（如何生成这类常规二维码、小程序码，可参考《微信小程序之生成自定义参数小程序二维码》这篇文章），咱们能够将二维码或小程序码分享到朋友圈去。

不过，这种二维码看起来比较单调，不太感人！

为了提高吸引力，咱们能够把这种用于分享出去的二维码图片作的尽可能美观、有情景感一些，好比像腾讯出品的小程序《长城你造不造》里生成的这种分享图片：

这种配有图文的图片，就比单单给一个硬邦邦的二维码要吸引人得多啦！你是否是也想试试作这种分享图呢？咱们今天就来讨论一下如何实现这样的分享图。

实现这种合并图文的方案，选择无外乎就是在前端作仍是在后端作。若是在后端作的话，可选的技术方案仍是挺多的，各类后端语言都有本身的绘图工具库，好比nodejs里能够用node-canvas来作，或者也能够经过调用一些图片编辑软件（如ImageMagic）来实现。

而在前端作的话，因为微信小程序也提供了一系列基于canvas的绘图相关API，因此绘制这样的图片仍是比较简单易上手的，且调试起来也比较方便直观。因此，决定先在小程序前端这边来实现了。

添加画布

首先，在小程序里进行绘图操做须要用到组件，那咱们就先在咱们的wxml代码中放入以下的：

 

1. <canvas< span=""> canvas-id="shareCanvas" style="width:600px;height:900px">

这样一来咱们就有了一个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 = promisify(wx.getImageInfo)
wxGetImageInfo({
    src: 'http://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 = promisify(wx.getImageInfo)
wxGetImageInfo({
    src: 'http://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 = promisify(wx.getImageInfo)
Promise.all([
    wxGetImageInfo({
        src: 'http://some-domain.com/background.png'
    }),
    wxGetImageInfo({
        src: 'http://some-domain.com/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: res.tempFilePath

})

}

})

}, 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 (res.errMsg == "saveImageToPhotosAlbum:fail cancel") {

wx.showModal({

title: '保存图片失败',

content: '您已取消保存图片到相册！',

showCancel: false

});

} else {

wx.showModal({

title: '提示',

content: '保存图片失败，您能够点击肯定设置获取相册权限后再尝试保存！',

complete: function(res) {

console.log(res);

if (res.confirm) {

wx.openSetting({}) //打开小程序设置页面，能够设置权限

} else {

wx.showModal({

title: '保存图片失败',

content: '您已取消保存图片到相册！',

showCancel: false

});

}

}

});

}

}

})

}

}, 1500)

},

根据业务需求能够选择（下载图片而且显示下载进度），

 downloadTask.onProgressUpdate((res) => {
       if (res.progress === 100) {
         this.setData({
          progress: ''
         });
       } else {
        this.setData({
           progress: res.progress + '%'
        });
     }

以上就是在微信小程序里合成一个朋友圈分享用的小程序推广图片的简要流程了！

更多小程序内容请关注个人主页~~~~~~~~~~~~~~~~~~~~~~~

使用mpvue开发小程序教程（一）

使用mpvue开发小程序教程（二）

使用mpvue开发小程序教程（三）

使用mpvue开发小程序教程（四）

使用mpvue开发小程序教程（五）

使用mpvue开发小程序教程（六）