微信小程序制作海报并将其分享给朋友圈如何实现

小程序制作海报可以直接上传一些小程序图片，这里小编为大家介绍如何制作海报并通过小程序分享给朋友圈？

添加画布

首先，小程序中的绘图操作需要使用组件，然后我们首先将以下内容放在我们的wxml代码中：

这样我们就有了600x900的绘图区域。然后，我们将开始编写JS代码以在此画布上进行绘制。

步骤1：绘制背景图

通过观察由《长城你造不造》合成的共享图，我们可以分析它的构成主要有以下三个部分：一个大的背景图像，一个动态文本（xxxx称你为“加入砖块修复长城”） ，以及小程序代码图片。

然后我们将首先找到一张用作背景图片的图片，并在画布上绘制。代码如下：

Const wxGetImageInfo=promisify（wx.getImageInfo）

wxGetImageInfo（{

Src:'https://some-domain/bg.png'

}）。然后（res=> {

Const ctx=wx.createCanvasContext（'shareCanvas'）

ctx.drawImage（res.path，0,0,600,900）

Ctx.draw（）

}）

在此代码中，我们使用wx.getImageInfo API将Web图像下载到本地（并获取其他信息，如图像的大小），然后调用ctx.drawImage方法将图像绘制到画布上并填充帆布。

步骤2：绘制文字

接下来，让我们继续在画布上绘制一段文字。通常，用于这种宣传的共享图对于文本描述是必不可少的，并且可以是根据场景的不同内容（例如文章的作者或文章）生成的动态信息。标题和内容。

我们下一次尝试在画布上添加一些文本：“作者：一磅代码”，或者在代码的前面部分继续编写：

Const wxGetImageInfo=promisify（wx.getImageInfo）

wxGetImageInfo（{

Src:'https://some-domain/bg.png'

}）。然后（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（“OF：pound Code”，600/2/2）

Ctx.stroke（）

Ctx.draw（）

}）

由于画布上的绘图文本不会自动换行，因此如果要绘制长文本，可以考虑限制一行中的单词数，并将长文本拆分为多行以进行绘制。

步骤3：绘制小程序码

最后，我们在画布的末尾添加一个小程序代码，它可以是静态小程序代码，或者为每篇文章动态生成的小程序代码（参考本文的《微信小程序之生成自定义参数小程序二维码》），无论如何，这个小程序代码也是一个图片，所以绘图方法类似于绘制基本图片。最终代码如下所示：

Const wxGetImageInfo=promisify（wx.getImageInfo）

Promise.all（[

wxGetImageInfo（{

Src:'https://some-domain.com/background.png'

}），

wxGetImageInfo（{

Src:'https://some-domain.com/api/generate/qrcode'

}）

]）。然后（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（“OF：pound Code”，600/2/2）

//小程序代码

Const qrImgSize=180

ctx.drawImage（res [1] .path，（600 - qrImgSize）/2,530，qrImgSize，qrImgSize）

Ctx.stroke（）

Ctx.draw（）

}）

通过这种方式，几乎可以生成我们的共享映射。

保存到系统相册

接下来，我们要将其保存到用户的系统相册中，为实现此功能，我们主要依靠两个API wx.canvasToTempFilePath和wx.saveImageToPhotosAlbum。

主要过程是首先通过wx.canvasToTempFilePath生成临时文件，然后通过wx.saveImageToPhotosAlbum将其保存到系统相册。

Const wxCanvasToTempFilePath=promisify（wx.canvasToTempFilePath）

Const wxSaveImageToPhotosAlbum=promisify（wx.saveImageToPhotosAlbum）

wxCanvasToTempFilePath（{

canvasId:'ShareCanvas'

}，这）.then（res=> {{p>

返回wxSaveImageToPhotosAlbum（{

filePath: res.tempFilePath

}）

}）。然后（res=> {

wx.showToast（{

标题:'保存到专辑'

}）

}）

promise.util.js如下：

[javascript]查看普通副本

/**

*将wx回调API转换为启用Promise的表单

*/

Module.exports={

Promisify: api=> {

返回（选项，参数）=> {

返回新的Promise（（解决，拒绝）=> {

Const extras={

成功:解决，

失败:拒绝

}

Api（{. options， extras}， params）

}）

}

}

}

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。