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

Question

首先，我对JavaScript的知识有些匮乏，表示抱歉。

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

我不能百分之百确定这是最好的方法，但目前这是我唯一能想到的方法，所以请耐心等待。我使用了（或许有些笨拙的）方法，即使用一个带有overflow:hidden属性的div进行剪裁，并在图像上使用clip:(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';
}

CroppedPreview 是图片，hiddenCropInner 是包含 overflow:hidden 定义的容器 div。

也许我只是个白痴，但我无法想出为什么它不能正常工作。根据我裁剪图像的哪些部分，图像会移动，宽度和高度以不同的比例增加，导致裁剪区域发生变化...

我希望能够调整（并且最好还能以其他方式操作）这个裁剪后的图像，就像它是一个真正的图像一样。有没有更好的方法？否则，我该如何修复这个函数？

我将永远感激任何帮助，但请记住，我是个完全的新手，真的不知道自己在做什么，所以需要用较为通俗易懂的语言解释。我不是让任何人替我完成，但我已经试图想出一些方法来轻松地调整我想要的东西（裁剪后的图像），但几天来一直没有结果。因此，非常感谢任何人提供的帮助！

---

编辑 我现在创建了一个 fiddle，但令人尴尬的是，我甚至不能让它正常工作。尽管如此，它可以在这里找到：http://jsfiddle.net/Xenthide/x62L3/9/

我已经任意地定义了使用从未包含的裁剪函数中提取的值进行的初始裁剪，因为那似乎在很大程度上都能正常工作（好吧，还有它会使 fiddle 变得非常复杂）。本地代码似乎确实会导致图像大小发生变化，但出于我不知道的原因和无法改变的原因，fiddle 并没有...但希望它能使事情变得更清晰...

- Xenthide

---

我可以建议定义类似 var cropPre = document.getElementById('CroppedPreview'); 这样的东西和其他类似的定义，以避免每次调用 document.getElementById 并获得一堵难以阅读的代码墙。这样做也会更快。 - MaxArt

谢谢，我已按照建议进行了编辑，并尽量使其更易读。 - Xenthide

我猜CropImg是绝对定位的？这是必须的，否则clip无法工作。无论如何，你应该用你的代码创建一个fiddle，因为它不是很清楚你得到了什么。 - MaxArt

我实际上没有定义CroppedPreview的定位...虽然最初剪辑确实有效，但我能够定义一个裁剪区域，然后从中产生一个剪辑图像。只是调整剪切图像大小会导致问题...令人尴尬的是，我的fiddle也无法工作...http://jsfiddle.net/Xenthide/x62L3/9/ - Xenthide

Answer 1

假如this fiddle是你的工作的一个很好的代表，那么确实存在一些问题。

首先，你将和元素放在了

元素内：

<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>

现在，如果您不在这些按钮上指定type属性，则它们默认为type="submit"按钮。这意味着当您单击它们时，表单被提交，简而言之，重新加载页面（这解释了单击按钮时出现白色闪烁的原因）。无论您的函数是否有效，结果都将被页面重新加载所覆盖。

以下是避免这种情况的方法：

1. 不要在form中包装元素 - 在这种情况下，您不需要它。
2. 在submit事件上调用.preventDefault（或其他传统IE方法）函数。
3. 在按钮上定义type="button"（没有submit按钮，这应该可以防止在表单字段上按Enter键时提交表单）。

我将使用最后一种方法。

我们快要完成了。现在，你的fiddle无法正常工作，因为按钮的“click”事件监听器无法解析ResizeClip函数。这是因为ResizeClip不是全局定义的函数，即使它看起来是这样的（JSFiddle在这里没有帮助——但它取决于左侧菜单中的选择“onLoad”）。所以你可以：

1. 将该函数公开为全局变量，例如在定义后执行 window.ResizeClip = ResizeClip。 （提示：定义全局变量和函数被认为是不良实践。）
2. 从DOM中删除传统的事件注册（即按钮上的onclick属性），并使用更现代的方法在脚本中附加事件监听器，从而分离表示（HTML部分）和逻辑（Javascript部分）。

当然，我会使用后者：

<button type="button" id="enlarge">Enlarge Clip</button>
<button type="button" id="shrink">Shrink Clip</button>

在脚本的结尾处：

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

好的，它起作用了！更新的实时演示。

嗯，并不完全是这样。它并没有真正地裁剪图像，因为正如我告诉你的那样，你必须为其设置position: absolute。而且我猜rect参数需要一些工作。它只是放大和缩小图像。但现在你走上了正确的道路。

- MaxArt

---

非常感谢！现在这个小提琴基本上与我的本地代码一样工作。但是，我仍然不确定我完全理解你的意思...当我在CroppedPreview上设置“position:absolute”时，整个东西就消失了，无论是在本地还是在小提琴上..此外，图像被剪裁了，除非我误解了这个意思？如果您查看URL，则原始图像较大，并且随着图像的放大和缩小，所显示的图像区域也会更改。我认为，如果我将所有裁剪坐标按照图像尺寸的相同因子进行更改，则将显示相同的区域，但显然并非如此。 - Xenthide

@Xenthide，你看，clip属性到目前为止还没有任何效果。如果图像看起来被裁剪了，那是因为它的容器比较小，隐藏了一部分。此外，当你在图像上设置position: absolute时，它会消失，因为你计算出的clip值不太正确（太大），并且裁剪了整个图片。我建议仔细阅读规范，如果你仍然有问题，请开一个新的具体问题来讨论clip的值。 - MaxArt

啊，谢谢！我一直把剪辑矩形的顺序搞错了！实际上我根本不需要使用 overflow:hidden，那只是让事情变得更加混乱。 - Xenthide

@Xenthide 不用谢。但如果StackOverflow上的答案对您有帮助，请不要忘记接受并给予赞同。 - MaxArt