范围:深圳亚博app开发,软件定制开发,亚博app软件开发公司,深圳软件外包公司.TEL:3447249690
当前位置:首页 > app小程序

亚博-微信小程序开发生成图片分享教程

07-04 亚博APP
摘要:经由过程社交软件分享的体例来进行营销小法式,是一个经常使用的运营路子。小法式自己撑持直接将一个小法式的链接卡

微信小法式撑持经由过程扫描/长按辨认二维码或小法式码图片的体例进入一个小法式首页或小法式中某个特定页面(若何生成这类常规二维码、小法式码。

经由过程社交软件分享的体例来进行营销小法式,是一个经常使用的运营路子。小法式自己撑持直接将一个小法式的链接卡片分享至微信老友或微信群,然后他人便可以经由过程点击该卡片进入该小法式页面。可是小法式今朝不撑持直接分享到微信伴侣圈,而对我们来讲,微信伴侣圈又是一个很主要的吸引他人存眷的进口,所以,得想法子把这个资本操纵起来。

不外,这类二维码看起来比力单调。为了晋升吸引力,我们可以把这类用在分享出去的二维码图片做的尽可能美不雅、有情形感一些:

微信小程序开发生成图片分享教程

实现这类归并图文的方案,选择无外乎就是在前端做仍是在后端做。假如在后端做的话,可选的手艺方案仍是挺多的,各类后端说话都有本身的画图东西库,好比nodejs里可以用node-canvas来做,或也能够经由过程挪用一些图片编纂软件(如ImageMagic)来实现。 而在前端做的话,因为微信小法式也供给了一系列基在canvas的画图相干API,所以绘制如许的图片仍是比力简单易上手的,且调试起来也比力便利直不雅。所以,决议先在小法式前端这边来实现了。

添加画布

起首,在小法式里进行画图操作需要用到组件,那我们就先在我们的wxml代码中放入以下的:

canvas-id=shareCanvas style=width:600px;height:900px>

如许一来我们就有了一个600x900的画图区域。然后,我们要最先写JS代码在这张画布长进行画图操作。

绘制布景图

经由过程不雅察《长城你造不造》合成的那张分享图,我们可以阐发得出它的构成首要有以下3个部门:一张年夜的布景图,一段动态的文字(xxxx 喊你“一路来为苗条城献砖”),和一个小法式码图片。

那末我们就先找一张图片来当作布景图,将它画到画布上去,代码年夜致以下: 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方式将图片绘制到画布上,填满画布。

绘制文字

接着,让我们来在画布上继续绘制一段文字,一般这类宣扬用的分享图,少不了文字描写,并且多是按照场景内容分歧而发生的动态信息,好比多是一篇文章的作者、文章的题目和内容。

我们测验考试下在画布上添加一段居中显示的文字:“作者:微信小法式”,仍是基在前面的那段代码接着写: 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上绘制文字不会主动折行,假如要画一段比力长的文本,可以斟酌限制一行的字数,将长文本拆分成几行来画。

绘制小法式码

最后,我们在画布最后添加一个小法式码,可所以静态的小法式码,也能够是好比为每篇文章动态生成的小法式码(参考《微信小法式之生成自界说参数小法式二维码》这篇文章),归正这个小法式码也就是一张图片,所以绘制方式跟绘制底图差不多。最后的代码近似

如斯: 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进行保留到系统相册的操作。 const wxCanvasToTempFilePath = promisify(wx.canvasToTempFilePath) const wxSaveImageToPhotosAlbum = promisify(wx.saveImageToPhotosAlbum) wxCanvasToTempFilePath({ canvasId: \'shareCanvas\' }, this).then(res => { return wxSaveImageToPhotosAlbum({ filePath: res.tempFilePath }) }).then(res => { wx.showToast({ title: \'已保留到相册\' }) })

以上就是在微信小法式里合成一个伴侣圈分享用的小法式推行图片的扼要流程了,代码仅供参考,实战可自由阐扬。

保举浏览:微信小法式开辟自界说组件教程微信小法式开辟教程

版权保护: 本文由 亚博app开发 原创
转载请保留链接: http://www.cqsLin.com

关于我们      深圳亚博定制开发软件有限公司,自2013年成立以来,为上千家企业提供软件外包、系统软件开发、亚博app开发、微信公众号开发、深圳亚博小程序开发等各种优秀的软件定制开发服务.关键词:软件外包公司、手机软件开发、app制作开发、手机亚博app开发、小程序开发公司【TEL】:3447249690 微信:3447249690 QQ:3447249690
  • 1578文章总数
  • 13访问次数
  • 建站天数