小程序生成图片 微信小程序头像制作生成图片

小程序开发

2021-05-22

  分享功能不管是对于app还是小程序来说,都是常见的一种推广裂变方式,我们经常会将功能实用的小程序分享给好有,又或者将小程序的内容内容,生成图片海报分享出去,今天厦门在乎科技为大家带来微信小程序头像制作生成图片,一起来了解一下吧。

  

小程序生成图片 微信小程序头像制作生成图片


  微信小程序头像制作生成图片:

  1.实现这种合并图文的方案,选择无外乎就是在前端做还是在后端做。如果在后端做的话,可选的技术方案还是挺多的,各种后端语言都有自己的绘图工具库,比如nodejs里可以用node-canvas来做,或者也可以通过调用一些图片编辑软件(如ImageMagic)来实现。

  2.而在前端做的话,由于微信小程序也提供了一系列基于canvas的绘图相关API,所以绘制这样的图片还是比较简单易上手的,且调试起来也比较方便直观。

  3.添加画布

  首先,在小程序里进行绘图操作需要用到组件,那我们就先在我们的wxml代码中放入如下的:<canvas canvas-id="shareCanvas" style="width:600px;height:900px"></canvas> 

  这样一来我们就有了一个600x900的绘图区域。然后,我们要开始写JS代码在这张画布上进行绘图操作。

  步骤1:绘制背景图

  通过分享图,我们可以分析得出它的组成主要有以下3个部分:一张大的背景图,一段动态的文字,以及一个小程序码图片。

  那么我们就先找一张图片来当做背景图,将它画到画布上去

  我们通过使用wx.getImageInfo这个API来下载一个网络图片到本地(并可获取该图片的尺寸等其他信息),然后调用ctx.drawImage方法将图片绘制到画布上,填满画布。

  

小程序生成图片 微信小程序头像制作生成图片


  步骤2:绘制文字

  接着,让我们来在画布上继续绘制一段文字,一般这种宣传用的分享图,少不了文字描述,而且可能是根据场景内容不同而产生的动态信息,比如可能是一篇文章的作者、文章的标题和内容。

  由于在canvas上绘制文字不会自动折行,如果要画一段比较长的文本,可以考虑限制一行的字数,将长文本拆分成几行来画。

  步骤3:绘制小程序码

  最后,我们在画布最后添加一个小程序码,可以是静态的小程序码,也可以是比如为每一篇文章动态生成的小程序码。

  步骤4:保存到系统相册

  接着,我们要把它保存进用户的系统相册中去,实现这个功能,我们主要靠wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum这两个API。

  主要的流程就是先通过wx.canvasToTempFilePath将上绘制的图像生成临时文件的形式,然后再通过wx.saveImageToPhotosAlbum进行保存到系统相册的操作。

  

小程序生成图片 微信小程序头像制作生成图片


  以上就是今天为大家带来的关于“小程序生成图片 微信小程序头像制作生成图片”全部内容,小程序本身支持直接将一个小程序的链接卡片分享至微信好友或微信群,然后别人就可以通过点击该卡片进入该小程序页面,想要了解更多关于小程序开发的内容,欢迎关注厦门在乎科技-专注小程序、app、网站开发

即刻联系「信诚科技」专业项目经理为您提供产品咨询和项目报价!

立即咨询

CONTACT US

联系我们

联系电话:

131-6399-9993

电子邮箱:

公司地址:

厦门市思明区观日路44号厦门信息港

公司地址