一、需求说明
- 点击生成海报
- 海报有二维码
- 点击保存 可将海报保存到手机相册
二、需求实现
2.1 总体实现方式
这个需求的核心路径就是： 获取到图片路径 -> 使用 canvas 画图 -> 将 canvas 画布转换为 url -> 将该图片存储到手机相册
其中，各个步骤的实现方式如下：
-
获取到图片路径： 若是本地图片，可直接使用相对路径，如
'/images/poster-bg.png'若是网络图片，或接口返回的图片，则需要先将图片下载到本地，获取到图片的路径，再使用。可使用wx.getImageInfo实现 -
使用 canvas 画图： 在小程序中使用 canvas 与在正常 web 项目中不同。 正常项目中这样使用：
<canvas id="canvas-container"></canvas>
let canvas = document.getElementById('canvas-container')
let ctx = canvas.getContext()
// 接下来使用 ctx 的 api 进行绘图
而在小程序中，是无法直接使用 document.getElementById 这样的 api 操控 dom。因此，需要使用小程序专门提供的 api，用法如下：
<canvas canvas-id="canvas-container"></canvas>
let ctx = wx.createCanvasContext('canvas-container')
// 接下来使用 ctx 的 api 进行绘图
-
将 canvas 画布转换为 url 使用微信提供的 api，将完成的画布转换为 url：
wx.canvasToTempFilePath -
将该图片存储到手机相册 使用微信提供的 api，将图片保存在手机相册：
wx.saveImageToPhotosAlbum
<关于我们>
我们是来自帝都的一枚前端程序猿 + 一枚前端程序媛。
这里发布的文章是我们对学习内容的总结，预计会每周至少会更新一篇。
目前我们学习计划是： 小程序实战 => vue 进阶用法 => vue 原理 => css 基础 => es6 => js 深入
另外，工作中用到的一些技术和完成的功能，我们也会及时总结更新在这里
如文章有错误或表述不清晰，欢迎各位留言反馈~~
