Pinch zoom on mobile devices

[perpective2410]

Hello !

First of all, thanks for providing and maintaining this lib. Out of curiosity, on mobile devices, is it possible to pinch to zoom instead of using the slider ?

Thanks!

[scottcheng]

Currently no, but that would be a nice idea and worth some investigation.

[fejstan]

Thanks Scott for a great crop tool. I added pinch functionality also. We needed it for our project. http://rxb.se/cropit/jquery.cropit-pinch.js

Basically I added a new "onpinch"-event binded to the cropit object and I added "mousemove" to the PREVIEW_MOVE_EVENTS array.

It sets the zoom based on e.originalEvent.scale.

[scottcheng]

@fejstan Thanks so much for sharing your work!

[jimmiebtlr]

That's looking awesome for zoom out, zoom in however is not preventing the default correctly on chrome for android.

[sidonaldson]

Any update on this? I was about to use this in production then saw that you can't pinch on mobile which makes in undesirable.

[scottcheng]

@sidonaldson The code above from @fejstan works fine, but is not smooth enough to be added into the master branch. I've not fully tested it, but if you find it useful you may adapt it for your use.

[supratim-samantray]

zoom is not working on android web browsers

[lazy13]

Try this http://pastebin.com/kZTmynbn it is working on Android, iOS

[Manmade]

lazy13, what part is handling the pitch zoom? So I can get it in the latest version? Thanks.

[lazy13]

on line 457

key: 'onPreviewEvent', value: function onPreviewEvent(e) { if (!this.imageLoaded) { return; }

          this.moveContinue = false;
          this.$preview.off(_constants.EVENTS.PREVIEW_MOVE);

          if ( e.type === 'mousedown' || ( e.type === 'touchstart' && e.originalEvent.touches.length === 1 ) ) {

            this.origin = this.getEventPosition(e);
            this.moveContinue = true;
            this.$preview.on(_constants.EVENTS.PREVIEW_MOVE, this.onMove.bind(this));
          } else if ( e.type === 'touchstart' && e.originalEvent.touches.length == 2){

            this.scaling = true;
            this.dist = 0;
            this.$preview.on(_constants.EVENTS.PREVIEW_MOVE, this.onScale.bind(this));
          } else {
            (0, _jquery2['default'])(document.body).focus();
          }

          e.stopPropagation();
          return false;
        }
      },{
         key: 'onScale',
        value: function onScale(e) {

          var dist = Math.sqrt(
(e.originalEvent.touches[0].clientX-e.originalEvent.touches[1].clientX) * (e.originalEvent.touches[0].clientX-e.originalEvent.touches[1].clientX) +
(e.originalEvent.touches[0].clientY-e.originalEvent.touches[1].clientY) * (e.originalEvent.touches[0].clientY-e.originalEvent.touches[1].clientY));            

          if(this.dist != 0 ){
              if(this.dist < dist){
                  var newZoom = this.zoom + 0.01;                      
                  this.setZoom(newZoom);

              }else{
                  var newZoom = this.zoom - 0.01;                      
                  this.setZoom(newZoom);

              }

          }              
          this.dist = dist;
          e.stopPropagation();
          return false;
        }
      }, {

[Manmade]

lazy13, great will test it later :-) Thanks a lot!!

[pensierinmusica]

+1

[nicmar]

@lazy13: This worked great (iOS), maybe a tiny bit delay, and can't move and pinch at the same time, so it doesn't feel 100% native, but still very useful and natural for mobile cropit. @scottcheng should implement this in the master bransch. I will try to merge this with 0.4.5, doesn't seem to be that much difference.

[pensierinmusica]

Hi Nicmar! Would you consider also contributing to #92? It seems to be a feature requested by many users, but the I'm not sure if Cropit is really maintained anymore by @scottcheng.

Thx, cheers!

[nicmar]

@pensierinmusica: I'm not actually developing anything, I just merged @lazy13 pinch/zoom-mod with the latest version (0.4.5). You can get it here: http://pastebin.com/fM9daFcG Good luck with rotating, sounds cool though :)

[fkamlesh]

Hello everyone,

I have same issue on mobile, I am using cropit - v0.5.1 Can you please help me, thanks.

[JANogueira]

Hi Guys,

I've been messing around with v0.51 and this is what ended up with working pinch zoom while moving at the same time. But the pinch zoom speed is very high when the zoom is zero and very low when the zoom is near to the maximum allowed.

This is related with the increment or decrement of 0.01 on the current zoom. Honestly didn't dedicate a lot of time trying to sort this out.

Anyway here is my contribution. Hope it helps.

Starting on line 466:

      {
    key: 'onPreviewEvent',
    value: function onPreviewEvent(e) {
      if (!this.imageLoaded) {
        return;
      }
      
      this.moveContinue = false;
      this.$imageContainer.off(_constants.EVENTS.PREVIEW_MOVE);

      if (e.type === 'mousedown' || ( e.type === 'touchstart' && e.originalEvent.touches.length === 1 )) {
		  
        this.origin = this.getEventPosition(e);
        this.moveContinue = true;
        this.$imageContainer.on(_constants.EVENTS.PREVIEW_MOVE, this.onMove.bind(this));
      } else if ( e.type === 'touchstart' && e.originalEvent.touches.length == 2){

        this.scaling = true;
        this.dist = 0;
		this.origin = this.getEventPosition(e);
        this.moveContinue = true;
        this.$imageContainer.on(_constants.EVENTS.PREVIEW_MOVE, this.onScale.bind(this));
        this.$imageContainer.on(_constants.EVENTS.PREVIEW_MOVE, this.onMove.bind(this));
      } else {
        (0, _jquery2['default'])(document.body).focus();
      }

      e.stopPropagation();
      return false;
    }
  }, {
      key: 'onScale',
      value: function onScale(e) {

      var dist = Math.sqrt((e.originalEvent.touches[0].clientX-e.originalEvent.touches[1].clientX) * (e.originalEvent.touches[0].clientX-e.originalEvent.touches[1].clientX)+(e.originalEvent.touches[0].clientY-e.originalEvent.touches[1].clientY) * (e.originalEvent.touches[0].clientY-e.originalEvent.touches[1].clientY));

      if(this.dist != 0 ){
          if(this.dist < dist){
              var newZoom = this.zoom + 0.01;                      
              this.zoom = newZoom;

          }else{
              var newZoom = this.zoom - 0.01;                      
              this.zoom = newZoom;

          }

      }              
      this.dist = dist;
      e.stopPropagation();
      return false;
    }
  }