Clever Geek Handbook

Why is my script resizing the cropped image not working?

First, my apologies for my somewhat poor knowledge of javascript.

I'll explain briefly what I'm trying to do - I'm trying to customize the SIMPLE feature set so that users can upload an image, crop, rotate and resize the result.

I'm not 100% sure if this is the best way to do it, but this is the only way I can do it right now, so please bear with me. I am using a (maybe somewhat clumsy) clipping method using div c overflow:hidden

and a clip:(rect...)

in the image.

My resize function looks like this:

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

is an image, hiddenCropInner

is a container div that has a overflow:hidden

defined in CSS.

Maybe I'm just an idiot, but I can't figure out for my life why this is not working correctly. Depending on which parts of the image I clamp, the image shifts around, the width and height increase at different rates, causing the cropping area to change ...

What I would like to do is resize (and ideally manipulate differently) this cropped image as if it were a real image. Is there a better way to do this? Otherwise, how can I fix this feature?

I would always be grateful for any help, but please keep in mind that I am a complete newbie and really do not know what I am doing, so I need things to be somewhat clear for me. I am not asking anyone to do this for me, but I tried to come up with some method of doing what I want to do (easily resize the cropped image) for days with no result. So, thanks in advance for any help anyone can offer!

EDIT I've created a fiddle, but embarrassing enough I can't even get it to work. However, it can be found here: http://jsfiddle.net/Xenthide/x62L3/9/

I arbitrarily defined the initial trim using values ​​pulled from the crop function, which I didn't include as it seems to work fine for the most part (well, and that would just over complicate the fiddle). Locally this code appears to cause changes in the image size, but for reasons unknown and unchanged to me, the fiddle doesn't ... but hopefully this makes things a little clearer ...

+3


source to share


1 answer


Provided that this violin is a good representation of your work, there are indeed problems.

First of all, you have placed the elements input

and button

inside the cell 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>

Now, if you do not specify an attribute type

on these buttons, the default is the button type="submit"

. This means that when you click on them, the form is submitted and, in short, reloads the page (this explains that white blinks when buttons are clicked). Whether your function works or not, the result will be garbled by page reloading.

This can be avoided with these methods:

  • Don't complete elements in form

    - you don't need to in this case.
  • Call a function .preventDefault

    (or other old IE method) on an event submit

    on the form.
  • Define type="button"

    on buttons (no button submit

    , this should prevent the form from submitting when hitting Enter on the form fields too).

I am using the latter.

We're almost there. Now your fiddle won't work because event listeners " click

cannot resolve the function ResizeClip

. This is because it is ResizeClip

not a globally defined function, even if it looks like this (JSFiddle doesn't help here, but it depends on the selection of" onLoad "in the left menu) So you either:



  • Implement the function globally by doing something like window.ResizeClip = ResizeClip

    after you have defined it. (Hint: defining globals and functions is considered bad practice.)
  • Remove traditional event registration from the DOM (i.e. attributes onclick

    on buttons) and use a more modern approach that includes event listeners in your script, thus separating the presentation (the HTML part) and the logic (Javascript).

Of course, I'll use the latter:

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

And at the end of the script:

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

There, it works! Demo version updated .

Well, not quite. It doesn't actually crop the image, because as I said, you have to set for it position: absolute

. And I think the parameters rect

need some work. He just makes it bigger and smaller. But now you are on a good track.

+1


source






More articles:


All Articles