README
@choiceform/ui-progressive-image
简介
ui-progressive-image 是一个应用了 canvas 虚化效果的图片加载组件,其实现原理和 medium.com 所采用的技术是 medium.com 所采用的技术是一样的。
Compatibility
- Ember.js v2.18 or above
- Ember CLI v2.13 or above
- Node.js v8 or above
Installation
$ ember install @choiceform/ui-progressive-image
ui-progressive-image 会安装一个用于渲染虚化效果的 npm 包,addon 负责自动加载这个包,所以无需做任何配置。
使用
为了使用 ui-progressive-image,需要准备两张图片,一张是缩略图,一张是原图(或者质量较好的图片),同时还需要提供原图的宽和高(单位像素)。组件会自动计算图片的占位尺寸(宽高比)。
例如:
{{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,但是要放在最前面并保证顺序。