為什么我的腳本調整剪裁圖像的大小不起作用？

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參數需要一些工作。 它只是放大和縮小。 但現在你走的是好路。