@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: 可使用的值分别是 containcover,对应 CSS 中 object-fit 属性;
  • fit-for:可使用的值分别是 columnrow,应用列排或行排的场景;

最后,imagethumbnail 参数可以省略 key,但是要放在最前面并保证顺序。