微信小程序canvas处理图片的旋转和导出

[Gesangs]

最近在做加水印小程序的时候，遇有以下需求：

• 给图片加上水印
• 然后旋转一下
• 再保存起来

加水印和导出保存都是一些api的使用，特别注意一下问题即可：

1. 将画布内容导出至图片wx.canvasToTempFilePath()要在CanvasContext.draw(boolean reserve, function callback)的回调中调用才能保证成功，同时注意boolean reserve这个参数。
2. wx.canvasToTempFilePath()其中要传入画布范围等参数，是不受CanvasContext上下文的坐标变换影响的，原点在左上角，x轴水平向右，y轴垂直向下。

本文重点讲旋转的基础操作：

前端对图片进行操作(旋转、裁剪等)，一般都要先绘入画布(canvas)中，进行一系列变换后，再进行导出。

这里为了方便描述，我把把画布分为两层：

1. 一层是显示层（实体层）
2. 另一层是坐标轴层（虚拟层）。

操作分两种：

1. 一种是对坐标轴层的操作如：translate(), scale(), rotate()等变换。
2. 另一种是绘制操作，先参照着坐标轴层进行一些绘制点、线、面的操作，然后再反映（draw(), stroke ()）到显示层。

一开始虚拟层和实体层是重合的，即：原点在画布的左上角，x轴在3点钟方向，y轴在6点钟方向。

然后进入正题：
canvas 图像旋转与翻转姿势解锁

over~