Get visible part (in coordinates) of overflown (zoomed in) image on a mobile screen, in HTML

I’m making a mobile application in HTML / javascript where the user at some point can pinch-in (zoom in) at an image to show a specific part of the image. As a result of the zoom there is only a visible part of the image (as we all know), and not the image as a whole. I want to get that visible part (how much the user has zoome-in and in what part of the image), when the touch-up event fires (when the user has lifted his fingers from pinching).

I’ve thought of various ways and I want your opinion.

  • How can i improve my Html5 Canvas pathing Quality?
  • Generating triangles from a random set of points
  • Drawing lines for Canvas
  • FabricJS Canvas Coordinates on Touch
  • adding custom attributes to fabricjs object
  • Undo/Redo for paint program - Canvas
    • Use pageXOffset and pageYOffset (but I can’t find how much zoom the user has done)
    • Use a canvas and manually handle the pinch effect
    • Take a screenshot (if possible) of the zoomed-in and compare it to the original, in order to find the visible part.

    I’m wrapping the application with PhoneGap, so I am able to write native code, if that helps in any way…

  • Fabric.js - Constrain Resize/Scale to Canvas/Object
  • How to send HTML <canvas> data to server
  • canvas : shape + shadow
  • Scaling KineticJS canvas with CocoonJS idtkscale
  • Double display of canvas element
  • requestAnimationFrame called right before the end of the frame?
  • One Solution collect form web for “Get visible part (in coordinates) of overflown (zoomed in) image on a mobile screen, in HTML”

    zoom is a gesture with 2 fingers so you have to listen on touchmove with event.targetTouches.length == 2
    and then read the X and Y coordinates from each finger

    the image zoom centre will be event.targetTouches[0].pageX – event.targetTouches1.pageX and event.targetTouches[0].pageY – event.targetTouches1.pageY in relationship with your scrollposition or image position (attention to + or -)

    and your scalefactor should be vectorLengthCurrent-vectorLengthStart

    see at http://www.html5rocks.com/en/mobile/touch/

    image: overview

    example:

    image:
    left: -100px | startFinger[0].pageX: 50px | currentFinger[0].pageX: 55px | startFinger1.pageX: 150px | currentFinger1.pageX: 140px

    so the centre should be: startFinger1.pageX – startFinger[0].pageX – left
    (only if startFinger1.pageX is greater | Y in the same way)

    vector length:
    sqrt(x^2 + y^2);