scale an image from a translated point to center

Question

First of all, here is the fiddle for my question:

https://jsfiddle.net/0u74faz6/1/

Basically I have an image in a container which is in itself, inside another container. After the image is scaled up, using the slider it might not fit into it's parent container. I am then using CSS translate to pan the image. This sets two variables translateX and translateY (see the makeImageDraggable method). After panning to a certain location, I want to be able to:

While scaling up, zoom from this point. And while scaling downwards, zoom out from this point to the center

Windows Photo Viewer does exactly this, where using the photo in the fiddle as an example, you can scale the image, pan to the womans hair and scale again and it enlarges the hair. When you zoom out, it starts from the hair to the center while maintaining the centered position of the image in the div.

The main code I'm using for this is in the method scaleImage, here:

translateX = translateX/scale, translateY = translateY/scale;
  img.style.transform = 'scale3d(' + currentScale + ',' + currentScale + ', 1) ' + 'rotate(' + (currentRotation -90) + 'deg)';
  parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)';

Can anybody help?

Answer 1

This is what I came up with. It's not perfect, but it does scale from the affected region while fitting the image in the container

https://jsfiddle.net/daibatzu/0u74faz6/6/

It calculates the midpoint of the area from which the user is translating the image to and checks whether it is top bottom or center for the y axis, or left center right for x axis. Then using this, determines from which area to shift the parent div. In any case, the fiddle explains better.

   // set transformOrigin and translate parent div
    parent.style.transformOrigin = transformOriginX  + 'px ' + transformOriginY + 'px';
    parent.style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px)';