前言
在 web 前端开发中，图片处理是一个非常基础和常见的需求。如果想要在图片上添加水印、压缩图片质量等操作，可以使用一些现成的工具包辅助完成。本文将主要介绍一款名为 preview-image 的 npm 包，它可以快速高效地实现图片预览和编辑的功能。
preview-image 简介
preview-image 是一个基于 Canvas 技术的图片预览、编辑工具，它支持多种常见图片操作，包括：缩放、旋转、裁剪、加水印、压缩等。它支持多种图片格式，包括 jpg、png、gif 和 bmp 等。它的使用非常简单，只需要几行代码就可以轻松完成图片编辑功能。
安装
在使用 preview-image 之前，需要先安装该 npm 包。可以通过 npm install 命令直接安装：
npm install preview-image --save
使用
1. 引入 preview-image 包
在需要使用 preview-image 的页面中，需要先引入该包：
import PreviewImage from 'preview-image';
2. 初始化
在页面的某个事件中（比如点击按钮或者拖拽图片等），初始化 PreviewImage，并设置图片地址：
const previewImage = new PreviewImage(document.getElementById('canvas'));
previewImage.loadImage('path/to/image.jpg');其中，传入的参数为 Canvas 元素，这里假设页面中有一个 ID 为 canvas 的 Canvas 元素；loadImage 方法用于加载图片，需要传入图片地址。
3. 图像操作
在图像加载完成以后，就可以进行各种图像操作了。preview-image 支持多种常见操作，下面分别介绍。
1. 缩放
缩放操作是预览图片中经常需要用到的，使用 preview-image 实现非常简单。实现方法如下：
// 放大 1 倍 previewImage.zoomIn(); // 缩小 1 倍 previewImage.zoomOut();
2. 旋转
旋转操作可以顺时针和逆时针旋转图片，使用 preview-image 实现方法如下：
// 顺时针旋转 90 度 previewImage.rotateCW(); // 逆时针旋转 90 度 previewImage.rotateCCW();
3. 裁剪
crop 方法用于裁剪图片，实现方法如下：
// 裁剪图片，x、y 为裁剪起始坐标，width、height 为裁剪宽高 previewImage.crop(x, y, width, height);
该方法返回一个 Promise，可以在裁剪结束后进行后续操作。
4. 加水印
useWatermark 方法可以在图片上添加水印，使用方法如下：
// 添加水印，x、y 为水印坐标，text 为水印文字内容 previewImage.useWatermark(x, y, text);
4. 导出
在编辑完成后，可以使用 toDataURL 方法将图片导出为 base64 编码的字符串：
const imgBase64 = previewImage.toDataURL();
如果想要将图片保存成文件，则可以使用 Blob 对象和 URL.createObjectURL 方法实现：
const imgBlob = previewImage.toBlob(); const imgUrl = URL.createObjectURL(imgBlob);
示例代码
下面给出一个完整的示例代码，该代码可以将本地图片上传后，进行预览，并进行缩放、旋转、裁剪、添加水印等操作，最后将编辑好的图片保存为文件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------- ----------
-------
------
------ ----------- --------- --
------- --------------------------
---- -------------------
------- ---------------------
------- --------------------------
------- ---------------------------
------- -------------------------------
------- --------------------------------
------- ------------------------
------ ----------- ------------------ --
------- ----------------------------------
------- ------------------------
------- --------------
------ ------------ ---- ----------------
----- --------- - --------------------------------
----- --------- - -------------------------------------
----- ------- - -----------------------------------
----- ------ - ----------------------------------
----- --------- - -------------------------------------
----- ---------- - --------------------------------------
----- ----------- - ---------------------------------------
----- ------------ - ----------------------------------------
----- ------- - -----------------------------------
----- ------------- - -----------------------------------------
----- --------------- - -------------------------------------------
----- ------- - -----------------------------------
--- -------------
----------------------------------- -- -- -
----- --------- - -------------------
-- ------------ -
-------------------
-------
-
----- ---------- - --- -------------
-- ----
----------------- - -------- ------- -
----------------- - ---
-- - ------- -----
----- --- - --- --------
------- - --------------------
-------------------------
-- -------------- -
-- ----- ------------ ------
-----------------------
------------ - --
------------- - --
-
-- --- ------------
------------ - --- ---------------------
--------------------------------------------
--
------------------------------------
---
----------------------------------- -- -- -
----------------------
---
------------------------------------ -- -- -
-----------------------
---
------------------------------------- -- -- -
------------------------
---
-------------------------------------- -- -- -
-------------------------
---
--------------------------------- -- -- -
--------------------- --- ---- ------------ -- -
----------------- ----------
---
---
----------------------------------------- -- -- -
------------------------------ ---- ---------------------
---
--------------------------------- -- -- -
----- --------- - -------------------------
----- ------- - ----------------------
----- ------ - -----------------------------
----- ------------ - ----------------------------
----------------- - -------
--------------------- - --------------
----- --- - ---------------------------------
------------- - -------
----------------------------- -- -- -
----------------------------------------
---
------------------------------
----------------------------------------
---------------------
---
---------
-------
-------结语
使用 preview-image 可以方便地实现图片预览和编辑功能。它支持多种常见的图片操作，使用起来非常简单，只需要几行代码即可。本文通过介绍该工具包的用法和示例代码，希望能够为前端开发者提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055caf81e8991b448da148