画布将悬停区域的一部分显示为放大的方形预览框

Question

>我正在开发一个简单的应用程序，它允许您将照片加载到画布中，然后我想实现类似 Google 检查器工具的东西，当您将照片的任何部分悬停在画布内时，它会为您提供照片小区域的缩放预览。例如100x100像素正方形，可让您查看照片的一部分。但不幸的是，我不知道如何开始。当前代码：

// Source Logic
var source_cvs = document.querySelector('.source'),
    source_ctx = source_cvs.getContext('2d'),
    source_w = source_cvs.width = 600,
    source_h = source_cvs.height = 400,
    img = new Image;
img.src = 'https://www.thecarpeople.co.uk/umbraco-media/Entry_492/c10a8f69-95b7-41ab-b341-73f1dd0fe6b2.jpg';
img.onload = function() {
    source_ctx.drawImage(img, 0, 0);
};
source_cvs.onmousemove = function(e) {
    console.log(e);
    var x = e.clientX,
        y = e.clientY;
    preview_render(x, y);
};
// Preview Logic
var preview_cvs = document.querySelector('.preview'),
    preview_ctx = preview_cvs.getContext('2d'),
    preview_w = preview_cvs.width = 100,
    preview_h = preview_cvs.height = 100,
    preview_render = function(x, y) {
        preview_ctx.clearRect(0, 0, preview_w, preview_h);
        preview_ctx.drawImage(img, x, y, 10, 10, 0, 0, 100, 100);
    };

演示：链接

编辑：--------

我已经更新了我的代码，所以它实际上可以满足我的需求，它正确地显示额外的正方形，我只是遇到了如何正确缩放图像并将其正确居中以显示的问题：

• -50px 在光标左侧
• -50px 在光标右侧
• 从光标顶部 -50px
• -50px 在光标底部

只是居中图像，所以光标指向中间。

Answer 1

我会用offsetX和offsetY替换clientX和clientY：

...
  var x = e.offsetX-7,
    y = e.offsetY-5;
...

演示