手写图片放大 缩小，上一张，下一张，旋转，图片加载效果

<div class="js-container" *ngIf="previewVisible"
     (click)="handleClose()">

  <ng-container>
  <nz-spin [nzSpinning]="loading">
    <div id="imgDiv"  [ngStyle]="{'height': 400 + 'px' }"
    class="image-container-loading"
    (click)="preventClose($event)"
    [@openClosePC]="isOpen ? 'open' : 'closed'">
    </div>
  </nz-spin>
</div>


js
  previewVisible: boolean = false;
  previewImageUrl: string;
  width = 800;
  imageWidth = 90;
  pdfWidth = 1000;

  loading = true;

  rotateDeg = 0;

  scale = 1;

  imgUlrIndex = -1;
  imageUrl: Array<any> = []
  previewVisible: boolean = false;


/**
 * 查看
 * @param imgs  数组
 * @param index 索引
 */
 viewImages(imgs: Array<any>, index: number) {
  this.imageUrl = imgs;
  this.imgUlrIndex  = index
  this.viewImage([this.imageUrl[this.imgUlrIndex]])

 }
  viewImage(images: {title: string, src: string}[]) {
    this.scale = 1;
    this.rotateDeg = 0;
    this.images = images;
    this.previewVisible = true;

    setTimeout(()=>{
      console.log(document.getElementById("imgDiv"),'这是id')
        
        // 此时已经渲染完成
        var img = new Image();
        // 如果图片加载完毕用 img load
        img.src = images[0].src
        img.style.position = 'initial'
        img.style.background = '#fff'
        img.style.height = '400px'
        img.id = 'imgages'
        img.style.transform = 'scale3d('+this.scale+', '+this.scale+', 1)' + 'rotate(' + this.rotateDeg + 'deg)'
        if(img.complete) {  
           this.loading = true;
        }  
        img.onload = ()=> {  
            this.loading = false
        }  
        document.getElementById("imgDiv").appendChild(img);

    }, 2000)
  
    if(this.isMobileFeiShuEnter) {
      this.imageWidth = 90;
    } else {
      this.imageWidth = 100;
    }

    this.isPdf = this.images[0].src.toLowerCase().endsWith('.pdf');
    if (this.isPdf) {
      this.pdfUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(images[0].src);
    }
  }
  /**
   * 上一张/下一张
   * @param index 索引
   * @param type top上一张 bottom下一张
   */
  top(index, type) {
    if(type == 'top') {
      if(index == 0) {
        this.nzMessageService.warning('已经是第一张了~');
        // this.imgUlrIndex = this.imageUrl.length - 1;
        // this.viewImage([this.imageUrl[this.imgUlrIndex]])
        return;
      }
    this.imgUlrIndex -= 1
    this.viewImage([this.imageUrl[this.imgUlrIndex]])
    } else {
      // 下一页
      if(index == this.imageUrl.length-1) {
        this.nzMessageService.warning('已经是最后一张了~');
        // this.imgUlrIndex = 0;
        // this.viewImage([this.imageUrl[this.imgUlrIndex]])
        return;
      }
      this.imgUlrIndex += 1
      this.viewImage([this.imageUrl[this.imgUlrIndex]])
    }
    
  }

  preventClose(e: Event) {
    e.stopPropagation();
  }



  /**
   * 放大/缩小
   * @param type 类型 da 放大   xiao 缩小
   * @param factor 默认 15
   */
  scaleImageByFactor(type: string, factor: number) {
    if(type == 'da') {
      if(this.imageWidth >= 500) {
        return;
      }
      
      this.imageWidth += factor
      this.scale += 0.3;
    } else {
      if(this.isMobileFeiShuEnter) {
        this.imageWidth = 90;
      } else {
        this.imageWidth = 100;
      }
      this.scale = 1;
    }
    let img = document.getElementById('imgages')
    img.style.transform = 'scale3d('+this.scale+', '+this.scale+', 1)' + 'rotate(' + this.rotateDeg + 'deg)'

  }

  rotateImage(deg: number) {
    this.rotateDeg = this.rotateDeg + deg;
    let img = document.getElementById('imgages')
    img.style.transform = 'scale3d('+this.scale+', '+this.scale+', 1)' + 'rotate(' + this.rotateDeg + 'deg)'
  }

  handleClose() {
    document.getElementById("imgDiv").innerHTML = ''
    this.loading = true;
    this.previewVisible = false;

}


css
.js-container {

  .ant-spin-nested-loading {
    position: relative;
    top: 200px;
    // transform: translateY(50%);
  }

  .button-btn{
    padding: 7px;
    margin-right: 6px;
    border-radius: 5px;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    border: 1px solid transparent;
    // box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    border-color: #d9d9d9;
    i:hover {
      color: #40a9ff;
      cursor: pointer;
    }
  }

  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.25);
  display: flex;
  justify-content: center;
  // z-index: 10000;
  z-index: 200;
  overflow: scroll;
  .image-container {
    z-index: 10001;
    top: 20%;
    position: relative;
    height: fit-content;
    img {
      // border: #f0f0f0 5px solid;
      position: initial !important;
      background-color: initial;
      background: #fff;
      transition: transform .3s cubic-bezier(.215, .61, .355, 1) 0s;
      transform: scale3d(1, 1, 1) rotate(0deg);
    }
  }

  .image-container-loading {
    z-index: 10001;
    top: 20%;
    // transform: translateY(50%);
    position: relative;
    height: fit-content;
    img {
      // border: #f0f0f0 5px solid;
      // border: 1px solid transparent;
      position: initial !important;
      background-color: initial;
      background: #fff;
      transition: transform .3s cubic-bezier(.215, .61, .355, 1) 0s;
      transform: scale3d(1, 1, 1) rotate(0deg);
    }
  }

  .image-actions {
    z-index: 10002;
    position: fixed;
    bottom: 64px;
    margin: auto;
  }
}