Angular 7圖像縮放

Question

我在尋找的角7的圖像縮放的解決方案，正是這樣

我已經找到了 ，但這是針對AngularJs的。 鏈接示例有什么好地方嗎？

Answer 1

進行縮放，只能通過改變鼠標的移動來改變背景的背景，例如， 如何在w3school中創建圖像縮放

background-image:...
background-position:...
background-size

假設您有一個類似的組件：

<div class="img-zoom-container">
    <img #img id="myimage" [src]="imagen" (load)="onLoad()">
    <div #len  [style.left] ="posX+'px'" [style.top] ="posY+'px'"
class="img-zoom-lens">
</div>

在Angular中，我們使用ViewChild來獲取對“ div”的引用，並且可以使用Renderer2將樣式添加到作為輸入傳遞的div的背景中。 所以我們的應用程序組件就像

<app-zoom [img]="img" [divZoomed]="divZoomed" ></app-zoom>
<div #divZoomed class="img-zoom-result"></div>

我們使用onLoad函數來實現計算並將背景放置在“ divZoomed”中

  onLoad()
  {
    this.render.setStyle(this.divZoomed,'background-image',"url('" + this.imagen+ "')");
    this.render.setStyle(this.divZoomed,'background-size',(this.img.nativeElement.width * this.zoom) + "px " + (this.img.nativeElement.height * this.zoom) + "px")
    this.render.setStyle(this.divZoomed,'background-repeat', 'no-repeat')
    this.render.setStyle(this.divZoomed,'transition','background-position .2s ease-out');

    const dim=(this.divZoomed as any).getBoundingClientRect()

    this.cx=(dim.width-this.img.nativeElement.width*this.zoom)/(this.img.nativeElement.width - this.lens.nativeElement.offsetWidth);
    this.cy=(dim.height-this.img.nativeElement.height*this.zoom)/(this.img.nativeElement.height -
     this.lens.nativeElement.offsetHeight);

  }

使用HostListener，我們可以移動鼠標

  @HostListener('mousemove',['$event'])
  mouseMove(event:any)
  {
    const result=this.moveLens(event);
    this.render.setStyle(this.divZoomed,'background-position',result)
  }

len和final的位置的計算有點復雜

  moveLens(e:any)
  {
    let pos
    let x
    let y;
    /*prevent any other actions that may occur when moving over the image:*/
    e.preventDefault();
    /*get the cursor's x and y positions:*/
    pos = this.getCursorPos(e);
    /*calculate the position of the lens:*/
    x = pos.x - (this.lens.nativeElement.offsetWidth / 2);
    y = pos.y - (this.lens.nativeElement.offsetHeight / 2);
    /*prevent the lens from being positioned outside the image:*/
    if (x > this.img.nativeElement.width - this.lens.nativeElement.offsetWidth) {x = this.img.nativeElement.width - this.lens.nativeElement.offsetWidth;}
    if (x < 0) {x = 0;}
    if (y > this.img.nativeElement.height - this.lens.nativeElement.offsetHeight) {y = this.img.nativeElement.height - this.lens.nativeElement.offsetHeight;}
    if (y < 0) {y = 0;}
    /*set the position of the lens:*/
    this.posX = x;
    this.posY = y;
    /*display what the lens "sees":*/

    let result = (x * this.cx) + "px "+(y * this.cy) + "px"

    return result;


  }
  getCursorPos(e) {
    let a, x = 0, y = 0;
    e = e || window.event;
    /*get the x and y positions of the image:*/
    a = this.img.nativeElement.getBoundingClientRect();
    /*calculate the cursor's x and y coordinates, relative to the image:*/
    x = e.pageX - a.left;
    y = e.pageY - a.top;
    /*consider any page scrolling:*/
    x = x - window.pageXOffset;
    y = y - window.pageYOffset;
    return {x : x, y : y};
  }

堆棧閃電戰的結果

更新那里的未成年人堆疊閃電變化，以允許使用兩個輸入imgWidth和imgHeigth縮放圖像。 由於圖像相同，因此允許預覽圖像小於實際尺寸

Answer 2

那這個ngx-img-zoom或這個ngx-image-zoom呢？

Answer 3

我已經多次使用CroppieJS，並且它與Angular一起使用時效果很好，它不僅用於縮放，還允許編輯圖像，希望對您有所幫助。

https://foliotek.github.io/Croppie/