jquery - 平移和缩放图像插件

Question

我正在尝试实现像谷歌艺术和文化图像缩放和平移。

例如看这里。

我尝试使用ng2-image-viewer库，但似乎无法解决。

以下是我尝试过的片段。

<app-image-viewer 
[images]="['https://images.nga.gov/en/web_images/niagara2.jpg']"
[loadOnInit]="true"
[idContainer]="'idOnHTML'">
</app-image-viewer>

结果：

如您所见，图像在预期区域上方，不是适当的控件，也不是为我们提供小地图的那个小矩形。

标签： jqueryangularimageimageview

Answer 1

按照这个：

1- 要安装此库，请运行：

npm install iv-viewer
npm install ng2-image-viewer

2- 在 AppModule 中

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { ImageViewerModule } from 'ng2-image-viewer';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,

    // Specify your library as an import
    ImageViewerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3- 现在只需在 angular-cli.json 文件中添加这些代码：

"styles": [
    "../node_modules/ng2-image-viewer/imageviewer.scss"
],

4- 导入库后，您可以在 Angular 应用程序中使用其组件、指令和管道：

<!-- You can now use your library component in app.component.html -->
<h1>
  Image Viewer
</h1>
<app-image-viewer [images]="['https://picsum.photos/900/500/?random', 'https://picsum.photos/900/500/?random', 'https://picsum.photos/900/500/?random']"
[idContainer]="'idOnHTML'"
[loadOnInit]="true"></app-image-viewer>

演示