Angular 中的图像放大镜

Question

我正在尝试在悬停时实现图像放大镜。我试图复制 w3schools 中的代码，这纯粹是 Javascript。我正在尝试在 Angular 中实现以下代码

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_magnifier_glass

我在打字稿中使用了上述方法，并从 Angular 中的 ngOnInit 调用它，但我无法从该方法中获得任何结果。我确保正确传递了 id 并验证了正在调用的方法。但仍然无法获得任何结果结果。我不希望将任何 npm 包用于放大镜，因为它们中的大多数都有错误。

组件.ts

ngOnInit(){

 this.magnify(imgID, zoom)

 }

magnify(imgID, zoom) {

  var img, glass, w, h, bw;

  img = document.getElementById(imgID);

  /*create magnifier glass:*/

  glass = document.createElement("DIV");

  glass.setAttribute("class", "img-magnifier-glass");

  /*insert magnifier glass:*/

  img.parentElement.insertBefore(glass, img);

  /*set background properties for the magnifier glass:*/

  glass.style.backgroundImage = "url('" + img.src + "')";

  glass.style.backgroundRepeat = "no-repeat";

  glass.style.backgroundSize = (img.width * zoom) + "px " + (img.height * zoom) + "px";

  bw = 3;

  w = glass.offsetWidth / 2;

  h = glass.offsetHeight / 2;

  /*execute a function when someone moves the magnifier glass over the image:*/

  glass.addEventListener("mousemove", moveMagnifier);

  img.addEventListener("mousemove", moveMagnifier);

  /*and also for touch screens:*/

  glass.addEventListener("touchmove", moveMagnifier);

  img.addEventListener("touchmove", moveMagnifier);

  function moveMagnifier(e) {

    var pos, x, y;

    /*prevent any other actions that may occur when moving over the image*/

    e.preventDefault();

    /*get the cursor's x and y positions:*/

    pos = getCursorPos(e);

    x = pos.x;

    y = pos.y;

    }

}

Answer 1

我遇到了同样的问题，但对于具有相同放大镜实现的图像缩放器。我通过调整 css 和 ts 代码（取自放大镜并与缩放器结合）使其工作。上面的答案不是我正在寻找的，因为我需要将放大的 img 放在不同的框中，而不是在 img 本身的顶部。这是我修改后适合我需要的stackblitz代码。