Question

我正在Angular 5中开发一个Web应用程序，我想使用图像缩放功能，如以下链接中所述

https://www.w3schools.com/howto/howto_js_image_zoom.asp

该链接很好地解释了一些图像缩放功能，但是它使用了标记中定义的Java脚本。

我的查询是如何在Angular 5或Angular 6中使用此类功能

谢谢萨钦（Sachin）

Answer 1

尝试这样的事情：

DEMO

HTML：

<h1>Image Zoom</h1>

<p>Mouse over the image:</p>

<div class="img-zoom-container" (mouseenter)="imageZoom('myimage', 'myresult');">
    <img id="myimage" src="https://user-images.githubusercontent.com/263237/36633897-d3237f2e-19ad-11e8-960a-daaf5ca3088a.png"
     width="300" height="240">
    <div id="myresult" class="img-zoom-result"></div>
</div>

CSS：

* {box-sizing: border-box;}

.img-zoom-container {
  position: relative;
} 

.img-zoom-lens {
  position: absolute;
  border: 1px solid #d4d4d4;
  /*set the size of the lens:*/
  width: 40px;
  height: 40px;
}

.img-zoom-result {
  border: 1px solid #d4d4d4;
  /*set the size of the result div:*/
  width: 300px;
  height: 300px;
}

Answer 2

使用这个 ng-img-magnifier npm 包。单击 DEMO 以查看有关此 Angular Image Zoom Package 的工作示例。它易于实施并提供完全自定义。

<ng-img-magnifier [thumbImage]='img' [fullImage]='img2'
    [imgWidth]='imgWidth' [imgHeight]='imgheight'
    [top]='top' [right]='right'
    [lensWidth]='lensewidth' [lensHeight]='lensheight'
    [resultWidth]='resultWidth' [resultHeight]='resultheight'>
</ng-img-magnifier>

Answer 3

使用 ngx-image-zoom 库进行图像缩放，因此安装如下：

$ npm install ngx-image-zoom --save

安装完成后，像这样装饰你的 Angular 应用模板、组件和模块：

app.component.html：

<lib-ngx-image-zoom
    [thumbImage]=myThumbnail
    [fullImage]=myFullresImage>
</lib-ngx-image-zoom>

app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  myThumbnail="Thumb image path goes here";
  myFullresImage="Fullers image path goes here";
}

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
 
// Import the library
import { NgxImageZoomModule } from 'ngx-image-zoom';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxImageZoomModule // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如何在Angular 5中使用图像缩放功能

3 个答案: