在现代的 web 应用程序开发中，图像处理已经成为不可或缺的一部分。为了解决这个问题，我们需要使用一个好的工具或者库，使得图像处理变得更加方便。在这个过程中，你会发现一个非常好的库，那就是 Ember-imgix。
Ember-imgix 是一个针对 Ember.js 框架的图像处理工具库。使用它，可以方便地实现诸如：自动调整图像尺寸、生成响应式图片等等，这为我们在开发中节省了大量宝贵的时间。
在本教程中，我们将学习如何使用 Ember-imgix 处理图像，以及如何在应用程序中集成它。
安装
使用 npm 很容易地安装 Ember-imgix。只需要打开终端窗口，输入以下命令即可：
npm install --save ember-imgix
配置
在安装完 Ember-imgix 之后，我们需要进行一些配置以供使用。首先，在 app/styles/app.js 文件加入以下代码：
// app/styles/app.js @import 'ember-imgix';
其次，设置一个 imgix-host 变量，这个变量用于指示图像服务的地址。可以将 imgix-host 变量添加到 app/index.html 文件中，如下：
<!-- app/index.html --> <script> window.imgixHost = 'https://my.imgix.net'; </script>
接下来，将设置扩展至 config/environment.js 文件中：
-- -------------------- ---- -------
-- ---------------------
-------------- - --------------------- -
--- --- - -
-- ---
------ -
----- -----------------------
-
-- ---
--
-- ---
------ ----
--完成这些设置后，我们就可以开始使用 Ember-imgix 这个强大的库了。
使用
我们将学习如何在 Ember.js 应用程序中使用 Ember-imgix。在这个过程中，我们将学习两个基本函数：imigx-size 和 imgix-url。
imigx-size 函数可以用来自动调整图像大小。它是使用图像服务中的参数来计算图像的大小的，使用方式如下：
{{imgix-size 'http://example.com/eiffel.jpg' w=320 h=240}}这将生成一个自动调整大小的图像，宽度为 320 像素，高度为 240 像素。
另外一个函数是 imgix-url，它是用来生成图像 URL 的。使用方式如下：
{{imgix-url 'http://example.com/eiffel.jpg' w=640 h=480}}这个函数将生成一个 640x480 的响应式 JPEG 图像的 URL（由处理服务自动缩放）。
在 Ember-imgix 中还有其他的选项可以用来处理图片，详情可以参考其官方文档。
示例代码
下面是一个完整示例代码，其中涉及了如何在使用 Ember-imgix 的同时，还使用 Ember.js 编写了一个响应式图像的应用。
<!-- app/components/my-image.js -->
{{imgix-size model.url w=640 h=480}}-- -------------------- ---- -------
-- ---------------------------
------ ---------- ---- --------------------
------ - -------- - ---- ----------------
------ ------- -------------------
--------- ----
---------- ----
--------- -------------------- ------------ ---------- -
------ -------------------- - ----------------------
--
---// app/templates/components/my-image.hbs
<div class="my-image">
<img {{bind-attr src=(imgix-url model.url w=imgWidth h=imgHeight)}} style={{style}} alt={{alt}}>
</div>-- -------------------- ---- ------- -- ---------------------------------- -- --------- - --------- --------- ------ ----- - --------- --- - --------- --------- ---- -- ------ -- ------- -- ----- -- ---------- ----- ------- ----- -
结论
在本文中，我们学习了如何使用 Ember-imgix 处理图像，以及如何将它集成到 ember 应用程序中。希望各位开发者可以阅读本文，掌握使用 Ember-imgix 的技巧和方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecb12