简介
笔者想向大家介绍一个有趣的 npm 包——kansatsu。kansatsu 是一个基于 HTML5 Canvas 技术的图像处理库，主要使用 JavaScript 实现，可用于开发基于浏览器的图像处理应用或游戏。kansatsu 提供了很多图像处理基本操作和高级算法，如像素级操作、旋转、缩放、切割、滤镜等。kansatsu 可以内嵌至页面，也可以在 electron 等打包的桌面应用中使用。
kansatsu 可以让开发者在开发基于浏览器的图像处理应用时，提高代码可阅读性、可维护性和开发效率。在开发基于浏览器的游戏时，可以使用 kansatsu 来进行图片动画渲染、特效、技能表现等操作，有效辅助快速开发。
安装
kansatsu 的安装非常简单，只需要在终端中运行以下命令即可：
npm install kansatsu
使用
kansatsu 提供了非常丰富的 API，可以支持很多图像处理操作。下面笔者主要介绍一下基础操作和常见使用场景。
前置条件
在使用 kansatsu 之前，需要确保以下环境已经准备就绪：
- 浏览器支持 HTML5 Canvas 的相关 API。
- npm 包管理工具，用于安装 kansatsu 包。
- 一个 HTML 页面，用来嵌入 kansatsu 库和相关 JavaScript 和 CSS 文件。
初始化
在 HTML 页面中引入 kansatsu 库文件：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
------- ----------------------------------------
-------
------
-------
-------然后在 JavaScript 文件中进行初始化：
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
const image = document.getElementById('image')
// 初始化 kansatsu
const ks = new Kansatsu(ctx, image)在初始化过程中，我们要传入两个参数：Canvas 的上下文 ctx 和被处理的图像 image。
基本操作
kansatsu 提供了一些基本的操作方法，用于进行像素级别操作、旋转、缩放、切割等。
在画布上绘制图像
使用 drawImage() 方法可以在画布上绘制图像：
ks.drawImage()
在不带参数情况下，将会在画布上绘制原始大小的图片。
旋转和缩放
此处以旋转为例，使用 rotate() 方法进行图片旋转：
ks.rotate(45)
在不带参数的情况下，将会以画布中心为中心进行旋转。
同时，我们也可以通过传入绘制中心点、旋转度数以及缩放比例进行旋转：
ks.rotate(45, 100, 100, 0.5)
上述代码将会以 (100, 100) 为中心点进行旋转，并将图片缩小为原来的 50%。
像素级操作
在 kansatsu 中，我们可以直接对图像的像素进行操作，包括图像的灰度化、亮度调整、色调调整等。
下面以图像的灰度化为例：
ks.grayscale()
在灰度化处理后，图像将会变为黑白灰色。
切割
kansatsu 还提供了一个方法，用于图片的切割处理：
ks.crop(0, 0, 100, 100)
上述代码将会切割出图片的左上角 100 * 100 的区域，并在画布上绘制。
滤镜
kansatsu 中提供了很多常用的滤镜操作，例如高斯模糊、锐化、浮雕等。
以高斯模糊滤镜为例：
ks.blur()
上述代码将会使用高斯模糊滤镜对图像进行处理。
完整示例
下面将 kansatsu 的基本操作组合成一个完整的示例：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-----------------------
-------
------- -
---------- ----- -----
-
--------
------- ----------------------------------------
-------
------
-----
------ ----------- ---------------- ----------------------------
------
------- ----------- ----------- ----------------------
--------
----- ------ - ---------------------------------
----- --- - -----------------------
--- ----- - --- -------
-------- ---------------- -
----- - --- -------
------------ - ---------- -
----- -- - --- ------------- ------
--------------
---------- -- ---- ----
------------- ---- ---- ----
------------
-
--------- - ------------------------------------------
-
---------
-------
-------在示例中，当用户选择文件后，会将其读取为 image 对象，并将它传入 kansatsu 进行处理。kansatsu 会依次进行绘制、切割、旋转和高斯模糊操作后，在画布上输出。用户也可以通过修改代码中的参数，自由地尝试各种操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4581e8991b448e5c89