Javascript 为什么调整剪裁图像大小的脚本不起作用？

首先，我为我对javascript的了解有些可怜而道歉

我将简要解释我正在尝试做什么-我正在尝试设置一组简单的功能，允许用户上传图像、裁剪、旋转和调整结果大小

我不是100%确定这是最好的方法，但这是目前我唯一能想到的方法，所以请容忍我。我使用的是一种（可能有点笨拙的）剪辑方法，即使用带有

溢出：隐藏的div和图像上的
剪辑：（rect…
属性

我的调整大小功能如下：

function ResizeClip(factor) {
    var CropImg = document.getElementById('CroppedPreview');
    var CropContainer = document.getElementById('hiddenCropInner');

    var newHeight = CropImg.offsetHeight * factor;
    var newWidth = CropImg.offsetWidth * factor;
    var newwrapHeight = CropContainer.offsetHeight * factor;
    var newwrapWidth = CropContainer.offsetWidth * factor;

    var cX1 = document.getElementById('qx1').value * factor;
    var cX2 = document.getElementById('qx2').value * factor;
    var cY1 = document.getElementById('qy1').value * factor;
    var cY2 = document.getElementById('qy2').value * factor;

    document.getElementById('qx2').value = cX2;
    document.getElementById('qx1').value = cX1;
    document.getElementById('qy1').value = cY1;
    document.getElementById('qy2').value = cY2;


    CropImg.style.height = newHeight + 'px';
    CropImg.style.width = newWidth + 'px';
    CropImg.style.marginTop = '-' + cY1 + 'px';
    CropImg.style.clip = 'rect(' + cX1 + 'px, ' + cX2 + 'px, ' + cY1 + 'px, ' + cY2 + 'px)';

    CropContainer.style.height = newwrapHeight + 'px';
    CropContainer.style.width = newwrapWidth + 'px';
}

cropedpreview
是图像，
hiddenCropInner
是容器div，它在CSS中定义了
溢出：隐藏

也许我只是一个白痴，但我一辈子也弄不明白为什么它不能正常工作。根据我剪辑的图像的哪个部分，图像会四处移动，宽度和高度以不同的速率放大，导致裁剪区域发生变化

我想能够做的是调整这个裁剪图像的大小（理想情况下，操作其他方式），就像它是一个真实的图像一样。有更好的方法吗？否则，如何修复该函数

我将永远感谢任何帮助，但请记住，我是一个完全的新手，真的不知道我在做什么，所以我需要有点清楚地解释我的事情。我没有要求任何人帮我做这件事，但我已经尝试了好几天想出一些方法来做我想做的事情（轻松调整剪辑图像的大小），但都没有结果。因此，提前感谢您提供的任何帮助


编辑我现在制作了一把小提琴，但令人尴尬的是，我甚至无法让它工作。尽管如此，可以在这里找到：

我使用从裁剪函数中提取的值任意定义了初始裁剪，但我没有包括该函数，因为它在大多数情况下都工作得很好（好吧，这只会使小提琴过于复杂）。在本地，代码似乎确实会导致图像大小的变化，但由于我不知道和不可变的原因，小提琴不会。。。但希望它能让事情变得更清楚一些……
如果这是你工作的一个很好的表现，那么确实存在一些问题

首先，您将
输入
和
按钮
元素放在
表单
元素中：

<form>
    <input type="text" name="qx1" id="qx1" value="74">
    <input type="text" name="qy1" id="qy1" value="63">
    <input type="text" name="qx2" id="qx2" value="367">
    <input type="text" name="qy2" id="qy2" value="220">

    <button id="enlarge" onclick="ResizeClip(1.10)">Enlarge Clip</button>
    <button id="shrink" onclick="ResizeClip(0.9)">Shrink Clip</button>
</form>

在脚本的末尾：

document.getElementById("enlarge").onclick = function() {ResizeClip(1.1);};
document.getElementById("shrink").onclick = function() {ResizeClip(.9);};

好了，它起作用了

嗯，不完全是这样。它并没有真正剪辑图像，因为正如我告诉你的，你必须为它设置
position:absolute
。我猜
rect
参数需要一些工作。它只是放大和缩小。但是现在您走上了一条好路。
我可以建议您定义类似于
var cropre=document.getElementById（'cropedpreview'）
和其他类似的定义，以避免每次调用
document.getElementById
时都会遇到可读性差的代码墙？它也会更快。谢谢，我已经按照建议进行了编辑，并试图让它更具可读性。我想
CropImg
绝对定位了？这是必须的，否则
clip
将不起作用。无论如何，你应该修改一下你的代码，因为它不太清楚你得到了什么。我实际上还没有定义
crappedpreview
的位置。。。虽然剪辑一开始确实有效，但我能够定义裁剪区域，然后从中生成裁剪图像。只是调整剪辑图像的大小会导致问题。。。令人尴尬的是，我的小提琴也不能用了。。。非常感谢！小提琴现在基本上和我的本地代码一样工作。但是，我不确定我是否完全理解你。。。当我在CroppedPreview上设置“position:absolute”时，整个东西就消失了，无论是在本地还是在小提琴上。。此外，图像被剪裁，除非我误解了这意味着什么？如果查看URL，则原始图像会变大，并且显示的图像区域会随着图像的放大和缩小而变化。我认为，如果我以与图像尺寸相同的因子更改所有裁剪坐标，将显示相同的区域，但情况显然不是这样。@Xenthide您可以看到，
clip
属性到目前为止没有任何效果。如果图像看起来被剪裁了，那是因为它的容器较小，隐藏了图像的一部分。此外，当您在图像上设置
position:absolute
时，它会消失，因为您为
clip
计算的值不太正确（太大），并且会剪辑整个图片。如果您仍然有问题，我建议并开始一个关于
clip
值的新的特定问题。啊，谢谢，我一直使用错误顺序的clip矩形！实际上我根本不需要使用溢出：隐藏，这只是让人困惑。@Xenthide不客气。但如果StackOverflow的答案对你有帮助，别忘了接受并最终投票。
document.getElementById("enlarge").onclick = function() {ResizeClip(1.1);};
document.getElementById("shrink").onclick = function() {ResizeClip(.9);};