@choiceform/ui-progressive-image

The default blueprint for ember-cli addons.

Usage no npm install needed!

<script type="module">
  import choiceformUiProgressiveImage from 'https://cdn.skypack.dev/@choiceform/ui-progressive-image';
</script>

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，但是要放在最前面并保证顺序。