javascript - 你如何放大到一个特定的点(没有 Canvas )？

Question

目标很简单，使用鼠标滚轮放大到特定点(鼠标所在的位置)。这意味着缩放后鼠标将位于图片的大致相同位置。

(纯粹是说明性的，我不在乎你是用海豚、鸭子还是麦当娜来做图像)
我不想使用 Canvas ，到目前为止我已经尝试过这样的事情:
HTML

<img src="whatever">

JS

function zoom(e){
    var deltaScale = deltaScale || -e.deltaY / 1000;
    var newScale = scale + deltaScale;
    var newWidth = img.naturalWidth * newScale;
    var newHeight = img.naturalHeight * newScale;
    var x = e.pageX;
    var y = e.pageY;
    var newX = x * newWidth / img.width;
    var newY = y * newHeight / img.height;
    var deltaX = newX - x;
    var deltaY = newY - y;
    setScale(newScale);
    setPosDelta(-deltaX,-deltaY);
}

function setPosDelta(dX, dY) {
    var imgPos = getPosition();
    setPosition(imgPos.x + dX, imgPos.y + dY);
}

function getPosition() {
    var x = parseFloat(img.style.left);
    var y = parseFloat(img.style.top);
    return {
        x: x,
        y: y
    }
}

function setScale(n) {
    scale = n;
    img.width = img.naturalWidth * n;
    img.height = img.naturalHeight * n;
}

这试图做的是计算 x,y 坐标 海豚的眼睛 之前 和 在 之后缩放，并在计算这两个点之间的距离后，从 中减去它左，上 位置以校正变焦位移，没有特别成功。
缩放会自然地将图像扩展到右侧和底部，因此校正会尝试拉回左侧和顶部，以便将鼠标保持在该死的海豚眼上!但它绝对不是。
告诉我，代码/数学有什么问题？考虑到除了 Canvas 之外我找不到任何解决方案，我觉得这个问题并不太宽泛。
谢谢!
[编辑] 重要
CSS 转换顺序很重要，如果您遵循所选答案，请确保先订购转换，然后再订购比例。 CSS 变换是向后执行的(从右到左)，因此首先处理缩放，然后是平移。

Answer 1

这是缩放到一个点的实现。代码使用 CSS 2D transform并包括通过单击和拖动来平移图像。这很容易，因为规模没有变化。
缩放时的技巧是首先使用当前比例(换句话说:将其除以当前比例)对偏移量进行归一化，然后将新比例应用于该归一化偏移。这使光标精确地保持在与比例无关的位置。

var scale = 1,
    panning = false,
    xoff = 0,
    yoff = 0,
    start = {x: 0, y: 0},
    doc = document.getElementById("document");

function setTransform() {
  doc.style.transform = "translate(" + xoff + "px, " + yoff + "px) scale(" + scale + ")";
}

doc.onmousedown = function(e) {
  e.preventDefault();
  start = {x: e.clientX - xoff, y: e.clientY - yoff};    
  panning = true;
}

doc.onmouseup = function(e) {
  panning = false;
}

doc.onmousemove = function(e) {
  e.preventDefault();         
  if (!panning) {
    return;
  }
  xoff = (e.clientX - start.x);
  yoff = (e.clientY - start.y);
  setTransform();
}

doc.onwheel = function(e) {
    e.preventDefault();
    // take the scale into account with the offset
    var xs = (e.clientX - xoff) / scale,
        ys = (e.clientY - yoff) / scale,
        delta = (e.wheelDelta ? e.wheelDelta : -e.deltaY);

    // get scroll direction & set zoom level
    (delta > 0) ? (scale *= 1.2) : (scale /= 1.2);

    // reverse the offset amount with the new scale
    xoff = e.clientX - xs * scale;
    yoff = e.clientY - ys * scale;

    setTransform();          
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#document {
  width: 100%;
  height: 100%;
  transform-origin: 0px 0px;
  transform: scale(1) translate(0px, 0px);
}

<div id="document">
  <img style="width: 100%"
       src="https://i.imgur.com/fHyEMsl.jpg"
       crossOrigin="" />
</div>