前言
在前端开发中，我们常常需要对画布进行截图，导出图片等操作，而使用 HTML5 的 canvas 实现这些操作是一种非常好的方式。然而，canvas 默认是不支持导出为图片的，因此我们需要借助一些第三方库来实现这个功能。其中，canvas2image 是一款非常优秀的 npm 包，能够帮助我们将 canvas 导出为图片。
安装
使用 npm 安装 canvas2image：
--- ------- ------------ ------
引入
在需要使用 canvas2image 的地方，可以这样引入它：
------ ------------ ---- ---------------
或者直接在 HTML 中使用 script 标签并引入依赖：
------- --------------------------------------------------------------------------
基本用法
canvas2image 提供了两种方法来将 canvas 导出为图片：saveAsJPEG(canvas, fileName, quality) 和 saveAsPNG(canvas, fileName)。
saveAsJPEG(canvas, fileName, quality)
这个方法可以将 canvas 导出为 JPEG 格式的图片。
参数
canvas：要导出为图片的 canvas 对象。fileName：导出的文件名。quality：JPEG 图片压缩质量，范围在 0 ~ 1 之间，默认为 1（最高质量）。
示例代码
----- ------ - ------------------------------------- ------------------------------- --------------- -----
saveAsPNG(canvas, fileName)
这个方法可以将 canvas 导出为 PNG 格式的图片。
参数
canvas：要导出为图片的 canvas 对象。fileName：导出的文件名。
示例代码
----- ------ - ------------------------------------- ------------------------------ ----------------
总结
使用 canvas2image 可以轻松地将 canvas 导出为图片，而且非常易用。相信在实际开发中，它会为你带来很大的帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60066c92ccdc64669dde5aa4