Image Pinch and Zoom in ionic - working code


#1

I created a gist of a functioning pinch and zoom page. I am using it for ionic RC3 app. Have not tested it rigorously. There are still improvements needed such as pan does not work along but as you are pinching and zooming. Also it may need ways to control the image to stay in view port.

Hope we can improve this code further with input from other people.

here is the link to gist for code

https://gist.github.com/vazad28/bd7ff445b090ab130ff1b291ca057002

credits:
https://forum.ionicframework.com/t/pinch-gesture-is-not-working/69564/2?u=vazad


Zoom on image in Ionic?
#2

thx for your solution!
But sadly I’m not able to try it out in the next time… Got A Lot of other work to do…

I hope I’m able to try it a bit later.


#3

Looks cool, I would just make it a standalone component,
Take out all the ion-header ion-content and navçontroller/param and inject the image with angular2 @input()


#4

cool. Please share the code if you may. Thanks


#5

I can’t seem to get this to work on my Android test device. I can see that it is firing the gesture events, but it isn’t actually scaling. Any idea why? We need the ability to scale some images in my application, and photo-viewer doesn’t seem to be able to handle images saved in the project directory.


#6

I actually got it working on Android! The trick is, Android does not use transform. It uses -webkit-transform. Annoying, I know!

So in the scss file for pinch-zoom-image you need to add:
-webkit-transform: translate(-50%, -50%);
and to apply the transform in the .ts code whenever you need to, you need to use:
this.container.style.setProperty('transform', this.transforms.join(' '));
this.container.style.setProperty('-webkit-transform', this.transforms.join(' '));


#7

Hi @vazad was panning supposed to be working? I get pinch working just fine, but panning is not…


#8

panning works with two finger for me


#9

I have implemented the panning with one finger here, as well as limit boundaries. Your piece of code helped me a lot showing the way. I’m very thankful


#10

I am glad I could help you solve your needs. Please share your code. Thanks.


#11

I Will share soon I’m implementing some other things


#12

Adding this works for me in Android. Thanks @dcleblond !


#13

This will solve all problems for now :wink:


#14

How to implement panning with one finger please help!! @AlanRezende @vazad


#15

Does it also work with ionic3?
I get an error:

'zoom-area' is not a known element:
1. If 'zoom-area' is an Angular component, then verify that it is part of this module.

in app.modules.ts:

import { BrowserAnimationsModule } from ‘@angular/platform-browser/animations’;
import { ZoomAreaModule } from ‘ionic2-zoom-area’;

[…]
imports: [
BrowserAnimationsModule,
ZoomAreaModule.forRoot()
[…]

in html:

<img [src]=“parent.imgBg” alt=“zoom it” />