简介
@heilbaum/heilbaum-ionic-blur-change 是一个基于 Ionic 的图片模糊处理组件。该组件能够在用户更改图片选择器的值时，自动将新的图片生成一张模糊效果的图像，并将其展示在页面上。
安装
您可以通过以下命令来安装 @heilbaum/heilbaum-ionic-blur-change：
npm install @heilbaum/heilbaum-ionic-blur-change
使用
需要在模块中先声明模块依赖：
import { HeilbaumIonicBlurChangeModule } from '@heilbaum/heilbaum-ionic-blur-change';
@NgModule({
imports: [
HeilbaumIonicBlurChangeModule
]
})然后在模板中使用：
<heilbaum-ionic-blur-change #imageChooser="heilbaum-ionic-blur-change"
[maxWidth]="500"
[maxHeight]="500"
[quality]="90"
(imageChange)="selectedImageChanged($event)">
<img [src]="userImage" alt="">
</heilbaum-ionic-blur-change>这里的 selectedImageChanged 是当用户修改了图片选择器中的值时触发的回调函数， $event 是传入的新图片缩略图数据。
在后台代码中，可以使用以下的代码来处理新生成的图片。
selectedImageChanged(image: string) {
this.userImage = image;
// 处理新生成的图片
}参数
maxWidth: number：生成图片的最大宽度。默认值为 500。maxHeight: number：生成图片的最大高度。默认值为 500。quality: number：生成图片的质量（0 到 100 的整数值）。默认值为 90。
例子
以下是一个完整的使用 @heilbaum/heilbaum-ionic-blur-change 的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
--------- -
--------------------------- ------------------------------------------
----------------
-----------------
--------------
---------------------------------------------
---- ----------------- -------
-----------------------------
-
--
------ ----- ------------ -
---------- --- - -------------------
--------------------------- ------- -
-------------- - ------
-- --------
-
-指导意义
@heilbaum/heilbaum-ionic-blur-change 为开发人员提供了一种简单的方式来处理用户上传的图片，并在不影响用户体验的前提下，保证了页面的美观。
在实际开发中，我们使用 @heilbaum/heilbaum-ionic-blur-change 可以避免手动编写复杂的图片处理代码，从而节省时间，提高开发效率。同时，由于该组件基于 Ionic，因此可以轻松地添加到任何 Ionic 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e081e8991b448d762a