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

Question

首先，我为我对javascript的一些可怜的知识道歉。

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

我不是百分百肯定这是最好的方法，但这是我现在想的唯一方法，所以请耐心等待。 我正在使用（可能有点笨拙）剪切方法，使用带有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是容器div，它在CSS中定义了overflow:hidden 。

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

我希望能够做的是调整（并且理想情况下，操作否则）此裁剪图像，就像它是真实图像一样。 有没有更好的方法呢？ 否则，我该如何修复该功能？

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

---

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

我已经使用从我没有包含的裁剪函数中提取的值任意地定义了初始剪辑，因为它似乎在大多数情况下工作得很好（好吧，那将会大大超过复杂的小提琴）。 本地代码似乎确实会导致图像大小的变化，但由于原因不明和不可改变的原因，小提琴不会...但希望它能使事情更清晰......

Answer 1

如果这个小提琴很好地代表了你的工作，那确实存在一些问题。

首先，您将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. 在.preventDefault上的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);};

在那里，它的作品！ 更新了现场演示 。

好吧，不完全是。 它并没有真正剪切图像，因为正如我告诉你的那样，你必须设置它的position: absolute 。 我想rect参数需要一些工作。 它只是放大和缩小。 但现在你走的是好路。