Angular 11 通过按钮放大和缩小图像答案

【问题标题】：Angular 11 Zoom in and out of the image via the buttonsAngular 11 通过按钮放大和缩小图像
【发布时间】：2022-11-10 18:12:55
【问题描述】：

我们需要一个如何通过按钮放大和缩小的示例，因为它已在 Microsoft 团队中实现。我已经在我的项目中添加了按钮，请看截图。

这是查看图像，它们被扔到聊天中，您需要通过按钮增加和减少图像。

<ng-container *ngIf="files.length > 1">
 <div (click)="previous()"
    class="turn previous clickable">
  <vks-icon color="white"
       icon="image-prev"></vks-icon>
 </div>
 <div (click)="next()"
    class="turn next clickable">
  <vks-icon color="white"
       icon="image-next"></vks-icon>
 </div>
</ng-container>
<ng-container *ngIf="files[selectedFileIndex] as selectedFile">
 <img [alt]="selectedFile.name"
    [src]="selectedFile.previewContentUrl"
    (click)="next()"
    class="clickable">
 <div class="header">
  <div class="file-name">{{ selectedFile.name }}</div>
  <div class="file-order">{{ selectedFileIndex + 1 }} / {{ files.length }}</div>
  <div class="actions">

   <div *ngIf="showCopyToClipboard"
      matTooltipPosition="above"
      matTooltipClass="tooltip-overlay"
      [matTooltip]="'ZOOM_OUT' | translate"
      (click)="zoomOut()"
      class="action clickable">
    <vks-icon class="clickable square12"
         color="white"
         hoverColor="white"
         icon="zoom-out"></vks-icon>
   </div>
   <div *ngIf="showCopyToClipboard"
      matTooltipPosition="above"
      matTooltipClass="tooltip-overlay"
      [matTooltip]="'ZOOM_IN' | translate"
      (click)="zoomIn()"
      class="action clickable">
    <vks-icon class="clickable square12"
         color="white"
         hoverColor="white"
         icon="zoom-in"></vks-icon>
   </div>

   <a [download]="selectedFile.name"
     [href]="(selectedFile.contentUrl) | safe: 'url'">
    <div [matTooltip]="'DOWNLOAD_IMAGE' | translate"
       matTooltipPosition="above"
       matTooltipClass="tooltip-overlay"
       class="action clickable">
     <vks-icon class="clickable"
          color="white"
          hoverColor="white"
          icon="download"></vks-icon>
    </div>
   </a>
   <div *ngIf="showCopyToClipboard"
      matTooltipPosition="above"
      matTooltipClass="tooltip-overlay"
      [matTooltip]="'COPY_TO_CLIPBOARD' | translate"
      (click)="copyToClipboard()"
      class="action clickable">
    <vks-icon class="clickable square12"
         color="white"
         hoverColor="white"
         icon="copy"></vks-icon>
   </div>
   <div (click)="close()"
      class="action clickable">
    <vks-icon class="clickable"
         color="white"
         hoverColor="white"
         icon="x-12"></vks-icon>
   </div>
  </div>
 </div>
</ng-container>

我正在使用 Angular 11，所以我需要兼容的参数。我试过ngx-image cropper，你可以在那里实现缩放，但是你不能删除裁剪框，我在项目中不需要它。

【问题讨论】：

标签： html angular image angular11 zoom-sdk

【解决方案1】：

我的方法如下：

为当前scaleValue定义一个变量
将此变量设置为您的图像，如[style.scale]="scaleValue"
将你的图片包裹在一个div中并设置overflow: hidden;，这样图片就不会溢出到其他元素
在按钮单击时调整scaleValue 属性

【讨论】：