在前端开发中，常常需要将图片上传到服务器并进行处理，例如裁剪、压缩等操作。而利用 canvas 技术能够实现这一目的。canvas-image-uploader 是一个基于 canvas 技术实现的图片上传库，它能够方便地对上传的图片进行处理并发送到服务器。
安装
我们可以通过 npm 进行安装：
npm install canvas-image-uploader
或者在 HTML 文件中通过 script 标签引入：
<script src="https://cdn.jsdelivr.net/npm/canvas-image-uploader"></script>
使用方法
初始化
首先要对 canvas-image-uploader 进行初始化，以下是示例代码：
-- -------------------- ---- -------
------ ------------- ---- ------------------------
----- -------- - --- ---------------
------ --------------
------- ----------
-------- ------------
--------- ------ -- -
------------------------- ---------------
-
---初始化时，我们需要传入以下参数：
input: 文件上传的input元素的选择器。canvas: 要显示所选图片的canvas元素的选择器。cropBox: 裁剪框元素的选择器，如果没有则不进行裁剪操作。onUpload: 可选参数，上传文件时的回调函数。
初始化之后，我们便可以通过一系列的方法对上传的图片进行操作。
选择图片
使用 chooseImage() 方法选择图片。在选择图片之后，图片会自动显示在 canvas 中。
uploader.chooseImage()
裁剪图片
如果有需求对图片进行裁剪，可以使用 crop() 方法。
uploader.crop()
缩放图片
可以使用 zoomIn() 和 zoomOut() 方法对图片进行放大和缩小。
uploader.zoomIn(); uploader.zoomOut();
上传图片
可以使用 upload() 方法将处理后的图片上传到服务器。
uploader.upload();
完整示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
---------------------------- ------------
-------
------
------ ----------- ----------------
---- -----------------------
------- ---------------------
------- -----------------------------
------- ---------------------------
------- ----------------------------
------- -----------------------------
------- ---------------------------
------- ------------------------------------------------------------------
--------
----- -------- - --- -----------------------------------
------ --------------
------- ----------
-------- ------------
--------- ------ -- -
------------------------- ---------------
-
---
--------------------------------------------------------------- -- -- -
-----------------------
---
------------------------------------------------------------- -- -- -
----------------
---
---------------------------------------------------------------- -- -- -
-----------------
---
----------------------------------------------------------------- -- -- -
------------------
---
--------------------------------------------------------------- -- -- -
-----------------
---
---------
-------
-------总结
canvas-image-uploader 是一个简单易用，且功能强大的图片上传库，通过将 canvas 技术与图片上传结合起来，能够实现多种图片处理需求。希望本篇教程对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c92ccdc64669dde5a13