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

ゞ浴缸里的玫瑰 2022-07-13 01:58 240阅读 0赞

### **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][DEMO 1]

[DEMO]: http://htmlpreview.github.io/?https://github.com/qq20004604/some_demo/blob/master/canvas/%E5%B0%86Canvas%E8%BD%AC%E4%B8%BA%E5%9B%BE%E7%89%87.html
[DEMO 1]: http://htmlpreview.github.io/?https://github.com/qq20004604/some_demo/blob/master/canvas/sava%E5%92%8Crestore.html