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

Question

首先，我为我对 javascript 的一些可悲的知识表示歉意。

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

我不能 100% 确定这是最好的方法，但这是我目前能想到的唯一方法，所以请多多包涵。我正在使用带有overflow:hidden 的div 和图像上的clip:(rect...) 属性进行剪辑的（可能有些笨拙）方法。

我的resize函数如下：

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 是在 CSS 中定义了 overflow:hidden 的容器 div。

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

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

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

---

编辑我现在已经创建了一个小提琴，但令人尴尬的是我什至无法让它工作。尽管如此，它可以在这里找到：http://jsfiddle.net/Xenthide/x62L3/9/

我已经使用从我没有包含的裁剪函数中提取的值任意定义了初始剪辑，因为这在大多数情况下似乎工作正常（嗯，这只会使小提琴过于复杂）。在本地，该代码似乎确实会导致图像大小发生变化，但由于我未知且不可变的原因，小提琴不会......但希望它能让事情变得更清晰......

Answer 1

如果this fiddle很好地代表了你的工作，确实存在一些问题。

首先，您已将input 和button 元素放入form 元素中：

<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 时提交表单）。

我会使用最后一个。

我们快到了。现在，您的小提琴将不起作用，因为按钮的 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);};

在那里，它起作用了！ Updated live demo.

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