Angular 4+画布图像查看器

Angular 4+画布图像查看器
插件名称 ngx-imageviewer
发布时间 2020年7月2日
插件作者 hallysonh

这是一个Angular 4模块,用于创建基于画布的可配置,可调整大小的图像查看器。支持JPEG,PNG,GIF和PDF

可用操作:

  • 旋转
  • 放大
  • 重置以最大化大小
  • 自由移动
  • 更改页面(仅适用于PDF文件)

安装:

# Yarn
$ yarn add @hallysonh/ngx-imageviewer

# NPM
$ npm install @hallysonh/ngx-imageviewer --save

基本用法

导入模块后ImageViewerModule

import { ImageViewerModule } from '@hallysonh/ngx-imageviewer';

@NgModule({
  imports: [ImageViewerModule],
})
export class AppModule {}

在HTML上使用以下代码:

<ngx-imageviewer [src]="imageSrc"></ngx-imageviewer>

(可选)您可以提供字段widthheight。如果忽略这些值,将使用配置对象中的宽度和高度。

添加PDF支持

要添加PDF渲染支持,您必须首先pdfjs通过运行包括在内yarn add pdfjs-dist@2.0.489,并将其引用添加到angular.json文件中,如下所示:

{
  ...
  "scripts": [
    {
      "input": "node_modules/pdfjs-dist/build/pdf.min.js"
    }, {
      "input": "node_modules/pdfjs-dist/build/pdf.worker.min.js"
    }
  ],
  ...
}