Angular 中的图像放大镜

Question

我正在尝试在悬停时实现图像放大镜。我试图复制 w3schools 中的代码，这纯粹是 Javascript。我正在尝试在 Angular 中实现以下代码https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_magnifier_glass我在打字稿中使用了上述方法，并从 Angular 中的 ngOnInit 调用它，但我无法从该方法中获得任何结果。我确保正确传递了 id 并验证了正在调用的方法。但仍然无法获得任何结果结果。我不希望将任何 npm 包用于放大镜，因为它们中的大多数都有错误。组件.tsngOnInit(){ 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代码。