如何使图像可用Ionic 2进行缩放

Question

我有一个单一图像的页面,我怎样才能使这个图像缩放？

我的页面

Answer 1

您可以将图像查看器用于Ionic 2+

• 安装

npm install --save ionic-img-viewer

• 在app.module.ts中添加

import { IonicImageViewerModule } from 'ionic-img-viewer';

@NgModule({
  declarations: [
    MyApp, 
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicImageViewerModule
  ],

• 程序化用法:

<img src ="IMAGE_URL"#myImage(click)="presentImage(myImage)"/>

import { ImageViewerController } from 'ionic-img-viewer';

export class MyPage {
  _imageViewerCtrl: ImageViewerController;

  constructor(imageViewerCtrl: ImageViewerController) {
    this._imageViewerCtrl = imageViewerCtrl;
  }

  presentImage(myImage) {
    const imageViewer = this._imageViewerCtrl.create(myImage);
    imageViewer.present(); 
  }
}

演示:Demo ionic-img-viewer

Answer 2

我在 Ionic 论坛上找到了这个解决方法：

html:

<ion-scroll (pinch)="pinchEvent($event)" scrollX="true" scrollY="true" zoom="true" style="width:100%;height:100%;text-align:center;">
    <div [ngStyle]="{'background':'url('+src+') no-repeat','width' : width + 'px', 'height' : height + 'px', 'transform' : 'rotate('+rotacion+'deg)', 'background-size' : 'contain', 'background-position' : 'center'}" style="margin-top:50px;margin-bottom:50px;"></div>
</ion-scroll>

.ts 方法：

pinchEvent(e) {
    this.width = this.pinchW * e.scale;
    this.height = this.pinchH * e.scale;

    if(this.timeout == null){
        this.timeout = setTimeout(() => {
            this.timeout = null;
            this.updateWidthHeightPinch();
        }, 1000);
    } else {
        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
            this.timeout = null;
            this.updateWidthHeightPinch();
        }, 1000);
    }
}

updateWidthHeightPinch() {
    this.pinchW = this.width;
    this.pinchH = this.height;
}