Angular中引入viewerjs实现图片查看器

目录

一、 前言

二、 正文

2.1 下载viewerjs

2.2 引入到Angular项目中

2.3 封装成组件

2.4 其它地方调用

---

一、前言

项目中需要对图片进行缩放，旋转，拖动操作，无奈自身技术有限，加上原生方法太多，于是找到组件viewerjs，可惜的是，它不支持angular直接导入。
先来看一下成功之后的效果：

由于公司项目，怕泄露太多信息，所以截图成这样了。它下面的操作按钮是一张雪碧图。

正文

2.1 下载viewerjs

下载这个库的方式有很多，可以去官网下载，也可以像我一样懒一点直接npm viewerjs@1.10.0
这样在你项目的 node_modules 中就会有这样的目录

2.1 引入到Angular项目中

1. 引入相关的js文件

在angular.json 文件的script中引入node_modules/viewerjs/src/index.js

2. 引入相关css样式

在这之前你可以在assets中新建一个lib目录,文件内容如下，相关的文件来自于刚才node_modules/viewerjs/src目录下，自己去找一下。（可能某些存在冗余，暂时也没时间是测试。）
注意：

1. node_modules/viewerjs/src下并没有 viewer.less 文件，它原来是viewer.scss文件，因为我的是less编译，所以我自己将后缀名改了，如果你本身用的scss编译的，应该不用重命名。
2. 记得雪碧图也要引入进来。
   

3. 修改部分文件内容

更改正确的图片路径。

1. 更改 lib/viewerjs/viewer.css 文件内容 16行左右
   2. 更改 lib/viewerjs/viewer.less 文件内容 17行左右
   

4. src/style.less文件中引入

也许你的是根文件是css，或者是scss，但我的是less。

---

至此，我们所有的准备工作已经完成，下面我们将它封装成一个组件，便于在任何地方调用它

2.3 封装成组件

在你存放公共组件处新建一个image-viewer组件。

• image-viewer.component.html文件

<div class="imgViewHelp">
  <ul id="ljImgViewerId" #img_view class="list">
    <img class="image" [src]="item" #btn *ngFor="let item of imageUrl" [width]="width" [height]="height">
  </ul>
</div>

• image-viewer.component.less文件

.imgViewHelp{
    position: absolute;
    z-index: 99;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
    ul{
      height: 100%;
      img{
        height: 100%;
        width: 100%;
      }
    }
}

• image-viewer.component.ts文件

import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core';
import * as Viewer from 'src/assets/lib/viewerjs/viewer.js';
@Component({
  selector: 'app-image-viewer',
  templateUrl: './image-viewer.component.html',
  styleUrls: ['./image-viewer.component.less']
})
export class ImageViewerComponent implements OnInit {

  @ViewChild('ljImgViewerId') ljImgViewer: ElementRef;
  // 图片地址
  @Input() imageUrl: any = [];
  // 默认预览图大小 (单位px)
  @Input() width: any = 40;
  @Input() height: any = 40;

  constructor() { }

  ngOnInit(): void {
    // 传入是单条转换为数租
    if (typeof this.imageUrl == 'string') {
      this.imageUrl = [this.imageUrl]
    }
  }

  ngAfterViewInit(): void {
    new Viewer(this.ljImgViewer['nativeElement']);
    let event = new MouseEvent('click', { bubbles: true });
    (this.ljImgViewer['nativeElement'] as any)['dispatchEvent'].apply(this.ljImgViewer['nativeElement'], [event])
  }
}

---

2.4 其它地方调用

假设你在相应的Module中declarations过了

<app-image-viewer [imageUrl]="['http://img.wfcmw.cn/material/news/img/2020/04/71f56c8744b63f6d5d0f153ffc680748.jpg']"></app-image-viewer>

注意：imageUrl传值为数组，然后你自己在修饰边上的样式，就能达到你想要的效果。

---

2.5 效果展示

还是上面的图，哈哈。

---

加油自己！今天学会了手动解决代码冲突。