# @choiceform/ui-progressive-image

## 简介

ui-progressive-image 是一个应用了 canvas 虚化效果的图片加载组件，其实现原理和 [medium.com 所采用的技术是 medium.com 所采用的技术](https://jmperezperez.com/medium-image-progressive-loading-placeholder/)是一样的。

## Compatibility

- Ember.js v2.18 or above
- Ember CLI v2.13 or above
- Node.js v8 or above

## Installation

```shell
$ ember install @choiceform/ui-progressive-image
```

ui-progressive-image 会安装一个用于渲染虚化效果的 npm 包，addon 负责自动加载这个包，所以无需做任何配置。

## 使用

为了使用 ui-progressive-image，需要准备两张图片，一张是缩略图，一张是原图（或者质量较好的图片），同时还需要提供**原图**的宽和高（单位像素）。组件会自动计算图片的占位尺寸（宽高比）。

例如：

```htmlbars
{{ui-progressive-image
  width="xxxx"
  height="xxxx"
  blurRadius=5
  object-fit="cover"
  fit-for="column"
  image="path/to/image"
  thumbnail="path/to/thumbnail/or/base64/formatted"}}
```

`blurRadius` 是调整虚化效果程度的参数，默认值是 `3`；建议在 `1-10` 之间自行调整来找到一个适合的虚化效果，如果这个参数设置过大，虚化效果将变成大面积的色块（或许在某些时候正合适）。

还有两个参数会影响样式的设置，ui-progressive-image 内置了一些样式来适应不同的布局要求：

- `object-fit`: 可使用的值分别是 `contain` 和 `cover`，对应 CSS 中 `object-fit` 属性；
- `fit-for`：可使用的值分别是 `column` 和 `row`，应用列排或行排的场景；

最后，`image` 和 `thumbnail` 参数可以省略 key，但是要放在最前面并保证顺序。