带你快速玩转canvas（6）导出为base64字符串和画笔的保存

8. 将canvas转为图片可用的base64字符串

解释：

1. 简单来说，就是将canvas标签的画布内容，转为base64字符串；
2. base64字符串作为img标签的src，是可以直接显示为图片的；

canvas.toDataURL(type, encoderOptions)

1. 返回一个base64字符串；
2. type可选，表示图片的转换目标类型，类型是字符串，默认是"image/png"，如果传的类型不支持/错误，也会自动转为默认的png格式的base64字符串； 
3. encoderOptions可选，表示图片质量，范围0-1，1质量最好，如果超出取值范围，将会使用默认值0.92；
4. 该字符串可以作为img标签的src的值，可以正常显示为图片。

注：

1. 不知为何，在未设置strokeStyle时，我画一个矩形，我转为“image/jpeg”类型图片，输出的图片是纯黑色（见DEMO）：
2. 不知为何，图片质量我设置后并没有生效（值为1和值为0.1转换出来的字符串，其值是相同的，见DEMO）；

DEMO见链接：
DEMO

9. 保存画笔状态和恢复画笔状态

解释：

1. 简单来说，就是保存当前ctx设置的各种属性，在需要时，可以恢复到保存时的属性；
2. 保存api是无返回值的，这说明不能保存多种不同的状态；
3. 只能恢复一次，如果恢复后还需要保存，则需要再次调用保存的api；

ctx.save()

1. 保存的api，无返回值；
2. 保存状态只能恢复一次；
3. 也可以说是保存ctx的上下文环境；
4. 根据MDN的说明，保存的状态有以下：

    当前的变换矩阵。
    当前的剪切区域。
    当前的虚线列表.
    以下属性当前的值： strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, lineDashOffset, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline, direction, imageSmoothingEnabled.

ctx.restore()

1. 恢复保存时的状态，无返回值；
2. 恢复只能恢复一次，第二次恢复无效；
3. 恢复的内容显然是保存时的内容（见上面）；

DEMO