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/