简介
ember-imgur 是一个用于在 Ember.js 中上传并处理图片的 npm 包。通过它，我们可以将图片上传到 imgur 并进行处理，如截取、裁剪、压缩等。除此之外，它还提供了丰富的事件机制，支持多种类型的图片格式。
本篇文章将会详细介绍 ember-imgur 的使用方法及其相关注意事项，让读者能够更好地使用这个 npm 包。
安装
安装 ember-imgur 非常简单，只需要在终端输入以下命令：
npm install --save ember-imgur
使用方法
在使用 ember-imgur 之前，需要先引入它，可以像下面这样引入：
import ImgurUploader from 'ember-imgur';
基本用法
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ------------- ---- --------------
------ ------- --------------------
-------- -
------------- -
--- ------ - ------------------------------------
--- -------- - --- ---------------
------- -------
------ -------
------ ------
---
----------------------------- -- -
-----------------------
-------------- -- -
-----------------
---
-
-
---我们创建了一个 ImgurUploader 对象，并将图片的 URL、标题等信息传递给它。随后，我们调用 upload() 方法将图片上传到 imgur。在 upload() 方法中，我们可以监听专门处理各种 upload 事件的回调函数。
上传过程事件监听
ember-imgur 提供了两种类型的事件：
- 上传事件：
- progress：上传进度事件，它有一个 progress 参数，表示已经上传的字节数。
- success：上传成功事件，它有一个 response 参数，表示服务器返回的响应内容。
- error：上传失败事件，它有一个 error 参数，表示上传失败的原因。
- 图片处理事件：
- compressSuccess：压缩成功事件，它有一个 response 参数，表示服务器返回的响应内容。
- compressError：压缩失败事件，它有一个 error 参数，表示压缩失败的原因。
- cropSuccess：裁剪成功事件，它有一个 response 参数，表示服务器返回的响应内容。
- cropError：裁剪失败事件，它有一个 error 参数，表示裁剪失败的原因。
- resizeSuccess：缩放成功事件，它有一个 response 参数，表示服务器返回的响应内容。
- resizeError：缩放失败事件，它有一个 error 参数，表示缩放失败的原因。
下面是一个例子，展示了如何监听 progress 和 success 事件：
-- -------------------- ---- -------
------ ------------- ---- --------------
------ ------- --------------------
-------- -
------------- -
--- ------ - ------------------------------------
--- -------- - --- ---------------
------- -------
------ -------
------ ------
---
----------------------- ---------- -- -
------------------- --------- ---------------
---
---------------------- ---------- -- -
---------------------------
---
------------------------------- -- -
------------------- -------------------
---
-
-
---可以看到，我们使用了 on() 方法来监听 progress 和 success 事件。在 success 中，我们可以通过 response.link 获取上传后的图片 URL。
图片处理
ember-imgur 支持对图片进行压缩、裁剪和缩放等操作。
下面这个示例展示了如何对上传的图片进行压缩：
-- -------------------- ---- -------
------ ------------- ---- --------------
------ ------- --------------------
-------- -
------------- -
--- ------ - ------------------------------------
--- -------- - --- ---------------
------- -------
------ -------
------ ------
---
---------------------- ---------- -- -
---------------------------
--- ----------- - --- ---------------
------- -------
------ --------------
-------- ----
----- ------
---
--------------------------------- ------------------ -- -
----------------------- ----- ---- ---------------------------
---
------------------------------------ -- -
------------------- -------------------
---
---
------------------------------- -- -
------------------- -------------------
---
-
-
---在这个示例中，我们在成功上传后，创建了一个新的 ImgurUploader 对象，让它使用之前上传的图片 URL，并设置了 quality 和 type 属性。使用 compression() 方法对图片进行压缩，并用 on() 方法监听 compressSuccess 事件。在事件回调中，我们可以获取压缩后的图片 URL。
其他操作如裁剪和缩放也可以用类似的方式进行。
总结
通过本文，我们了解了 npm 包 ember-imgur 的基本用法和相关事件监听，以及如何进行压缩、裁剪和缩放等图片处理操作。希望读者能够充分利用这个库，提高前端开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e18a563576b7b1ecb20