前端开发中，图片处理是一个非常重要的环节，比如用户上传图片后，需要对图片进行压缩、水印、裁剪等操作。本文将介绍如何使用 Vue + Vuex 实现图片上传并加水印。
1. 实现图片上传
Vue2.0 提供了一个非常好用的第三方插件 vue-cli-plugin-upload，我们可以直接用它上传图片。安装方法如下：
npm install vue-cli-plugin-upload --save-dev
使用方法如下：
-- -------------------- ---- -------
----------
-----
------- -----------------------------
------ ----------- ---------- -------------------- -------------------
------
-----------
--------
------ - ---------- - ---- ------
------ --------
-------- -
---------------------- -----------------
------ -- -
-----------------------
--
-------- --- -
----- ---- - -----------------
-- ------ -
----------------------
-
-
-
-
---------在上述代码中，我们通过点击按钮启动上传功能，实际上是通过 refs 获取到隐藏的 file input，然后触发点击事件。一旦选择了文件，就会触发 onChange 事件，将文件传递给 Vuex，然后调用 uploadImage 函数上传。
2. 实现图片处理
在 Vuex 中，我们可以对上传的图片进行处理，比如说加水印。我们需要引入一个叫 node-canvas 的库，它可以在 Node.js 环境下生成图片。安装方法如下：
npm install canvas --save
接下来，我们需要在 Vuex 的 actions 中加入图片处理的逻辑。示例代码如下：
-- -------------------- ---- -------
------ - ------------- --------- - ---- --------
------ ----- ----------- - -- ------ -- ----- -- -
------ --- ----------------- ------- -- -
----- ------ - --- ------------
------------- - ------- -- -
----- ----- - --- -------
--------- - -------------------
------------ - -- -- -
----- ------ - ------------------------- -------------
----- --- - -----------------------
-- ----
-------------------- -- -- ------------ -------------
-- -------
-------- - ----- ------
------------- - ---------- ---- ---- -----
----------------- - ------ --- ---
-- ------
----- -------------- - ------------------
-- ------
----- -------- - --- ----------
----------------------- ------------------------------ ----------
------------------------- ---------
-------------- -- -
-- --------- -- -------------- -
----- - ----- - - -------------
------------------- ------
--------------
-
--
------------ -- -
-------------
--
-
-
--------------------------
--
-
-------- ------------- --------- -
----- ---------- - ---------------------------
----- -- - --- ------------------------------
----- -- - --- --------------
--- ---- - - -- - - ------------------ ---- -
----- - ------------------------
-
------ --- ---------- - ----- ----------- --
-在上述代码中，我们首先使用 FileReader API 将图片文件转化成数据流，然后使用 Image 对象加载图片。接着，我们使用 canvas 生成一个新的图片，把源图片画到 canvas 上，然后为图片添加水印。最后，我们将生成的新图片转为 dataUrl 的形式，并使用 FormData 将转换后的文件对象上传到服务器。
3. 总结
本文介绍了如何使用 Vue + Vuex 实现图片上传并加水印。我们首先使用 vue-cli-plugin-upload 插件实现上传功能，然后使用 node-canvas 库在 Vuex 中实现图片处理。希望本文可以帮助读者轻松地实现图片上传及处理功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648ae65c48841e98949334ad