javascript - 如何使用 div 选择器在 canvas 元素中完美绘制图像的一部分

Question

我一直无法找到下一个问题的解决方案，我有一个带有 div 的图像，我们称其为“div 选择器”，div 可以由用户拖动。我想要完成的是绘制 div 内图像的内容，我已经编写了大部分代码，并且实际上绘制了图像的一部分，但它并不完全是 div 选择器内图像的内容。

我认为问题出在这里:

let sourceWidth = 137; // previous value: $(sq).width() EDIT: NEW VALUES
let sourceHeight = 137; //previous $(sq).height()

当我更改这些值时，图像的一部分会发生变化，但我无法找到允许以编程方式更改值的微积分，因此如果图像高度/宽度发生变化，则不会有问题，我当前拥有的值 被发现正在尝试另一张图像。

这是 jsfiddle:https://jsfiddle.net/9j3ypfyh/39/

新jsfiddle:https://jsfiddle.net/9j3ypfyh/126/

非常感谢您的宝贵时间。

编辑: 我还可以选择增加红色方 block 的大小，因此它应该适用于不同的方 block 大小以及不同的 Canvas 大小，因为我将对其进行媒体查询。

编辑2 我添加了使正方形改变大小的部分

编辑3 我使用以下值测试了代码:

let sourceWidth = $(sq).width();
let sourceHeight = $(sq).width();

我得到了特定屏幕尺寸的下一个结果(正是我需要的!!c:) 但是问题是，如果屏幕尺寸发生变化，它就不再起作用了:(

请帮忙!!

编辑

有没有办法根据所选区域创建新图像并忘记绘制图像？

Answer 1

正如我在评论中提到的，问题是由图像实际大小与图像元素大小不同引起的。您可以使用图像上的 naturalWidth 和 naturalHeight 属性来获取 Canvas 使用的尺寸。

This fiddle有工作代码。相关部分是计算(实际尺寸/dom尺寸)的比率并适当缩放源值。

        let widthScale = imageObj.naturalWidth / imageObj.width;
        let heightScale = imageObj.naturalHeight / imageObj.height;
        let sourceX = sq.offsetLeft * widthScale;
        let sourceY = sq.offsetTop * heightScale;
        // the -5 and +10 make sure the boundaries of the square match the image element
        let sourceWidth = ($(sq).width() - 5) * widthScale; 
        let sourceHeight = ($(sq).height() + 10) * heightScale;