昨天写了一个小程序，在本地生成一个二维码。这个小程序在本地生成一个二维码。今天就和大家分享一下小程序中生成海报的功能和具体步骤

这张分享海报的元素很少，都是用头像、海报背景、二维码绘制的(二维码的生成请参考上面的文章《小程序本地生成二维码》)。这次没有涉及文字绘制，但原理大致相同，所以本文就不详细阐述文字绘制了。现在让我们开始吧

注意：实现是基于mpvue框架的，如果直接用小程序自己的框架来开发，需要稍加改动

过程

0-1

0-2

单击第(0-1)页上的“生成独家海报”跳转到海报的第(0-2)页

资源前期准备

在生成海报之前，你需要准备，头像，海报背景图和二维码

为了生成没有闪烁或堵塞的海报，有必要首先在(0-1)页上准备这些数据

需要注意的是，生成海报时需要临时文件或本地文件。如果是网络图片，需要通过wx.getImageInfo() api获取图片的临时路径

这里头像使用的是网络路径，所以需要获取头像的临时临时路径，海报背景可以直接在本地使用

二维码由weapp-qrcode生成，然后返回临时路径使用(生成逻辑见文章开头“小程序本地生成二维码”)

准备之后，将资源信息以参数的形式发送到(0-2)页面

letshare info={ header ing : ' temp file path '，bgimg3360 '本地路径图片'，QR code 3360 ' temp file path ' } wx . navigatetto({ URL 3360 '/pages/create poster/main？共享信息=' JSON。stringfy(共享信息)})来获取资源

获取参数(0-2)

我们公司的项目是通过mpvue建设的，收购方式是

Mounted () {const options=this。$ root。$ MP . querythis . share info=JSON . parse(options . share info)}//如果是直接通过微信开发工具开发，在画布样式的onLoad函数{ const share info=JSON . parse(options . share info)}中获取options onLoad (options)

由于双画布保存的图片在临时保存图片时会出现模糊的情况，我们需要对画布进行多次处理，一般是加倍处理，可能会在Android上出现问题。

您也可以使用像素比率作为放大倍数，这更容易处理。这里，使用像素比率，如下所示

wx . getsystem info({ success(RES){//按像素比计算的画布实际大小(330x490)就是这个的显示大小。width=330 * RES . pixel ratio this . height=490 * RES . pixel ratio } })//Structure style canvas class=' canvas-poster ' id=' canvas poster ' : style=' { width : width ' px；height : height ' px ' } ' canvasPoster-id=' canvasPoster '/canvasimg : src=' http : poster ' class=' poster-img ' @ click=' previewImg ' alt=' div type=' button ' @ click=' save poster ' class=' save-BTN ' img src=' http3 3360./img/0.3 _ BTN _黄色_ BG . png ' alt=' div class=' BTN-text '保存图片/div/div . canvas-海报{ background-color : # fafa；动物园： 50%；//将画布缩小到50%(最好按像素比缩小。如果像素比为2，则为50%。如果不是基于像素比，生成图片时周围可能会有黑边。)绝对位置：left :-10000 px；//隐藏可视区域背景之外的画布： # 206949；}在生成之前获取画布信息

mounted(){ varquery=wx . createselectorquery(). query . select(# canvas poster ')。bounding client enter((RES)={//返回值包括画布this.drawImage(res) })的实际宽度和高度。exec()}生成逻辑

方法： {绘制图像(canvasAttrs){让CTX=wx。createcanvascontext(' canvasPoster '，this)让canvasW=canvasAttrs.width //画布的真实宽度让canvasH=canvasAttrs.height //画布的真实高度//头像和二维码大小都需要在规定大小的基础上放大像素比的比例后面都会*this.systemInfo.pixelRatio让表头rw=48 *这个。系统信息。像素比率让报头rx=(canvasW-报头rw)/2让表头ry=40 *这个。系统信息。像素比率让qcodew=73 *这个。系统信息。像素比率让qcodex=216 *这个。系统信息。像素比率让qcodey=400 *这个。系统信息。像素比/填充背景CTX。画图像(这个。共享信息。bgimg，0，0，canvasW，canvasH) ctx.save() //控制头像为圆形ctx.setStrokeStyle('rgba(0，0，0，2)') //设置线条颜色，如果不设置默认是黑色，头像四周会出现黑边框CTX。arc(表头rx表头rw/2，表头ry表头rw/2，表头rw/2，0，2 *数学. PI) ctx.stroke() //画完之后执行剪辑()方法，否则不会出现圆形效果ctx.clip() //将头像画到画布上CTX。画图像(这个。共享信息。头标框、头标框、头标框、头标框、头标框)CTX。恢复(CTX)。save()//绘制二维码CTX。画图像(这个。共享信息。二维码，二维码，二维码，二维码，二维码)CTX。拯救()CTX。draw()setTimeout(()={//下面的13以及减26推测是因为在写样式的时候写了固定的动物园： 50%而没有用像素比缩放导致的黑边，所以在生成时进行了适当的缩小生成，这个大家可以自行尝试wx。canvastempfilepath({ canvasid : ' canvaspelter '，x: 13，y: 13，width: canvasW - 26，height: canvasH - 26，destwisted : canvasW-26，desthe his : canvasH-26，success 3360(RES)={ this。海报=RES . tempfilepath } })}，200) })预览图片，预览后可长按保存或者分享给朋友wx。previewimage({ URLs :[this。海报]})})，保存海报(){ if(this。海报){ wx。将imagetoptoslabum({文件路径：)保存到此。海报，成功：(结果)={ wx。显示吐司({ title : ')海报已保存，快去分享给好友吧，图标： ' none ' })})} } }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。