WeChat-CanvasToHaiBao

介绍

微信小程序canvas生成海报，轮播图形式展现

详细介绍请戳这里

⭐小程序canvas生成海报

由于 wx.createCanvasContext() 接口不再维护，因此，我们将记录新旧接口生成海报的两种方法。

先上效果图

目前展现的是图片等元素组成、以轮播图形式展示的页面。为提高性能，采用按下保存海报按钮，再执行canvas生成海报，保存到本地相册这样一个操作。话不多说，来干！

⭐旧接口 wx.createCanvasContext

接口文档

① 写一个canvas对象

<canvas class="hide" canvas-id="share" style="width:480px;height:854px;"></canvas>

注意，这里只需给他加上 canvas-id 等下即可获取到该对象。 hide类主要是将 此画布隐掉，让他不要出现在我们的页面中。由于canvas的特殊性，我们采用最最最简单的办法，将它定位到屏幕之外即可。

.hide{
  position:fixed;
  left:9000px;
}

② 图片临时地址准备

接下来，我们就可以着手准备在画布上画上我们的海报。

首先、海报上有图片。注意，网络图片地址是不能直接被画上去的，要先转为临时地址。

当然若是本地图片，直接采用该地址即可，无需进行临时地址获取。

ImgUrlToTmp方法

利用微信的 getImageInfo 接口，实现临时地址获取。

③ canvas画布

等我们将图片地址准备好后，接下来，就正式进入我们的绘画阶段，调用 createNewImg 方法

之后再调用 toSave方法获取canvas地址以便于保存

④ 保存到本地相册

saveShareImg方法

⭐新接口 createSelectorQuery

接口文档

① 挂载一个canvas 对象

其实是类似的。 首先也是 挂载一个canvas 对象，注意，这里需要 指定 type 属性以及id

<canvas type="2d" class="hide" id="share" style="width:480px;height:854px;"></canvas>

下一步也是同旧接口，就不重复阐述了。

画布方法改变

见代码

画布保存转为地址

基本一致，就是多加了个 canvas 属性， 也就是将 canvas 对象传进去即可

利用像素点转化，可以提升海报的高清度

来看一下保存海报的效果图

轮播图实现

接下来来看一下轮播图实现， 微信开发者工具中直接有个组件 swiper

接口文档

这里 利用 currentIndex == index 判断当前选中项，从而改变选中的样式再加个滑动的动画即可