🍙代码片段：https://developers.weixin.qq.com/s/Xache9mO7MmE

🧂写在前面：由于在编辑器插入代码撤销后导致的bug太过于诡异， 我放弃在文本内插入代码，遂在语雀上写了文章，需要代码分析的可去语雀查看。文章地址：https://www.yuque.com/docs/share/ee2856e2-93f3-4cc2-92b8-81fcb051074a?# 《微信小程序 《canvas2d实践》》

🍪业务需要拍摄照片后，添加坐标、时间水印，压缩图片后上传。

微信小程序官方文档里：

CanvasContext wx.createCanvasContext(string canvasId, Object this)

本接口从基础库版本 1.9.6 起支持在小程序插件中使用

从基础库 2.9.0 开始，本接口停止维护，请使用 Canvas 代替

创建 canvas 的绘图上下文 CanvasContext 对象

那肯定得用Canvas 2d来实现啊！

实现：

1. 选择图片，需通过wx.getImageInfo()拿到图片的宽高；
2. 压缩图片，需注意分辨率；
3. 绘制图片，需通过canvas.createImage()创建图片，在onload中绘制图片到canvas；
4. 添加水印，设置字体时需注意书写语法规范；
5. canvas转为图片并上传，需在onload图片加载完后再转，destWidth和destHeight是实际转出的宽高，canvas2d中需配置canvas而非canvasId；

参考链接：

圣殿骑士：https://developers.weixin.qq.com/community/develop/article/doc/000242073903a04e082ab595b52013

https://developers.weixin.qq.com/community/develop/doc/000c4c00f703a84043ba6bf0058c00?highLine=canvas%25202d中的纸玫瑰