Ionic 3 image pinch and double tap zoom

Question

I want to show a zoomable SVG image inside an ion-tab on an Ionic 3 project. The effect I am looking for is just a regular pinch and double tap zoom, nothing special.

I've tried different combinations, but I can't make it work. This is what I have right now:

HTML:

<ion-content>
  <ion-scroll scrollX="true" scrollY="true" zoom="true" overflow-scroll="false" class="scroll-view" min-zoom="1" maxZoom="10">
    <img src="assets/img/image.svg">
  </ion-scroll>
</ion-content>

CSS:

.scroll-view{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

Any ideas? Thanks!

Solution 1

I've got the same trouble since a while. Today, this issue not yet solved (https://github.com/driftyco/ionic/issues/6482). I turned around this by using a non ionic2 team component (kind of image viewer randomly found on github). But i don't feel satisfied of this solution...

You can also try to follow this : https://forum.ionicframework.com/t/image-pinch-and-zoom-in-ionic-working-code/72850?source_topic_id=45910 seems like some people figured out how to make it work there

Solution 2

I've only tried this with an inline SVG image, but I used the svg-pan-zoom library (https://www.npmjs.com/package/svg-pan-zoom) along with hammerjs (https://www.npmjs.com/package/hammerjs). The svg-pan-zoom library says it works with SVGs in HTML object and embed elements as well.

Install them into your project with npm, import them into your component, them implement them according the instructions for the svg-pan-zoom library.

HTML:

<ion-content>
    <div class="zoom">
        <svg id="svg" class="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:100%;height:100%;">...</svg>
    </div>
</ion-content>

CSS:

.zoom {
    position: fixed;
    width: 100%;
    height: 100%;
}

Component:

import { Component } from '@angular/core';
import svgPanZoom from 'svg-pan-zoom';
import Hammer from 'hammerjs';

@Component({
    selector: 'page-map',
    templateUrl: 'map.html'
})
export class MapPage {
    panZoom:any;

    constructor(){ }

    ngOnInit(){
        let eventsHandler;
        eventsHandler = {
            haltEventListeners: ['touchstart', 'touchend', 'touchmove', 'touchleave', 'touchcancel'], 
            init: function(options) {
                var instance = options.instance, initialScale = 1, pannedX = 0, pannedY = 0

               // Init Hammer
               // Listen only for pointer and touch events
               this.hammer = Hammer(options.svgElement, {
                   inputClass: Hammer.SUPPORT_POINTER_EVENTS ? Hammer.PointerEventInput : Hammer.TouchInput
               })

               // Enable pinch
               this.hammer.get('pinch').set({enable: true})

               // Handle double tap
               this.hammer.on('doubletap', function(ev){
                   instance.zoomIn()
               })

               // Handle pan
               this.hammer.on('panstart panmove', function(ev){
                   // On pan start reset panned variables
                   if (ev.type === 'panstart') {
                       pannedX = 0
                       pannedY = 0
                   }

                   // Pan only the difference
                   instance.panBy({x: ev.deltaX - pannedX, y: ev.deltaY - pannedY})
                   pannedX = ev.deltaX
                   pannedY = ev.deltaY
               })

               // Handle pinch
               this.hammer.on('pinchstart pinchmove', function(ev){
                   // On pinch start remember initial zoom
                   if (ev.type === 'pinchstart') {
                       initialScale = instance.getZoom()
                       instance.zoom(initialScale * ev.scale)
                   }

                   instance.zoom(initialScale * ev.scale)

               })

               // Prevent moving the page on some devices when panning over SVG
               options.svgElement.addEventListener('touchmove', (e) => { e.preventDefault(); });
               }, 
               destroy: function(){
                   this.hammer.destroy()
               }
           }

           let options = {
               controlIconsEnabled: false,
               customEventsHandler: eventsHandler
           };

           this.panZoom = svgPanZoom('#svg', options);
    }

Solution 3

Zoom, pinch, double tap zoom of Image (tested in Ionic 4).

Use Photo Viewer.

Works with live URL only.

In app.module.ts

import { PhotoViewer } from '@ionic-native/photo-viewer/ngx';

...

providers: [
    PhotoViewer, ...
],

In custom.ts

import { PhotoViewer } from
'@ionic-native/photo-viewer/ngx';

...

constructor(private photoViewer: PhotoViewer) { }

...

showPhoto()
{
    console.log("showPhoto");
   this.photoViewer.show('https://dummyimage.com/600x400/000/fff');
}

In custom.html

<img (click)="showPhoto()" />