介绍
ng-imager 是一款基于 Angular 的图片处理库，可以用于缩放、裁剪、水印等操作。该库提供了多种配置项，可以满足大部分图片处理需求。
安装
使用 npm 安装：
npm install @springbuck/ng-imager --save
引入
在 app.module.ts 中引入 ng-imager：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - -------------- - ---- ------------------------
-----------
------------- -
------------
--
-------- -
--------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- - -使用
缩放图片
<img [src]="imageUrl | ngImager: { resize: { width: 300, height: 200 } }" />-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ---------------------- -- ------ ----- ------------ - -------- - ------------------------------- -
resize: 缩放选项width: 缩放后的宽度height: 缩放后的高度
裁剪图片
<img [src]="imageUrl | ngImager: { crop: { x: 0, y: 0, width: 300, height: 200 } }" />-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ---------------------- -- ------ ----- ------------ - -------- - ------------------------------- -
crop: 裁剪选项x: 裁剪起始点 x 坐标y: 裁剪起始点 y 坐标width: 裁剪后的宽度height: 裁剪后的高度
添加水印
<img [src]="imageUrl | ngImager: { watermark: { text: 'ng-imager', fontSize: 12 } }" />-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ---------------------- -- ------ ----- ------------ - -------- - ------------------------------- -
watermark: 水印选项text: 水印文本fontSize: 水印字体大小
自定义配置
<img [src]="imageUrl | ngImager: { resize: { width: 300, height: 200 }, watermark: { text: 'ng-imager', fontSize: 12 } }" />-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ----------- ------------ ---------------------- -- ------ ----- ------------ - -------- - ------------------------------- -
以上是 ng-imager 的基本使用方法，如果需要更多定制化操作，可以查阅 ng-imager 的官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cfb81e8991b448e6c54