CwCrop

About / FeedbackDemoHelp / Download

AboutComments/Feedback

A javascript-(mootools)-only tool to select a part of an image and crop it

Requirements

  • Works in Safari 3+, Firefox 3+, Chrome 3+, IE 6-11 and Opera 9+
  • Requires mootools 1.23+ with Drag.Move, Element.measure and (for example) PHP to crop the image

Features

  • Only 4 DIVs necessary
  • Marching Ants effect via CSS..! (Safari and Firefox of course only)
  • Shows crop dimensions (w x h) – and x/y-position while moving (configurable)
  • Crop-Button inside the frame (optional)
  • Hold SHIFT to select a square area
  • Also works with scaled images – shows the real size then
  • Minimal size, maximal size, initial position, fixedratio (optional) and x-/y-ratio constraints are configurable
  • Result: x- and y-position, width and height

Demo

cwcrop-screenshot

Downloads

Github Repository: github.com/mariofischer/cwcrop »

Changelog

1.14
Fix for wrong initial dimension, thanks to Martin Silenus!
1.13
Incorporate changes from Harm Hermsen, thanks!
0.98, 0.99, 1.0
More small fixes Demo issues resolved
0.95
Bugfixes (initialmax, ratio)
0.8
Bugfixes
0.76
Mootools 1.3 compatibility
0.70
Updates for value checking, documentation, performance Bugfixes for larger original image
0.68
Added fixed ratio
0.67
Initial public release Posted to Mootools Forge, Github

34 Replies to “CwCrop”

  1. Hello,

    I have a problem if I use originalsize, the initial dimensions of the cropframe are wrong, my fix:

    this.orig_minsize_x = this.options.minsize.x; // <<<— save original value
    this.orig_minsize_y = this.options.minsize.y; // <<<— save original value

    this.options.maxsize.x = ( this.options.maxsize.x * (1/this.orig_to_scaled.x) ).limit(1, this.elemsize.x-2);
    this.options.maxsize.y = ( this.options.maxsize.y * (1/this.orig_to_scaled.y) ).limit(1, this.elemsize.y-2);
    this.options.minsize.x = ( this.options.minsize.x * (1/this.orig_to_scaled.x) ).limit(1, this.elemsize.x-2);
    this.options.minsize.y = ( this.options.minsize.y * (1/this.orig_to_scaled.y) ).limit(1, this.elemsize.y-2);

    // init crop frame
    if (this.options.initialmax) {
    $(this.options.cropframe).setStyle("top", 0);
    $(this.options.cropframe).setStyle("left", 0);
    $(this.options.cropframe).setStyle("width", this.limits.x[1].toInt());
    $(this.options.cropframe).setStyle("height", this.limits.y[1].toInt());
    }
    else {
    $(this.options.cropframe).setStyle("top", this.options.initialposition.y);
    $(this.options.cropframe).setStyle("left", this.options.initialposition.x);
    $(this.options.cropframe).setStyle("width", this.orig_minsize_x.toInt()); <<<— use original value
    $(this.options.cropframe).setStyle("height", this.orig_minsize_y.toInt()); <<<— use original value
    }

    1. Just use the source-code from the demo page (the code and files which are linked there). I’ll have a look at the included demo-version but probably this will take some time.

  2. when I change the picture crop-orig.jpg in style by another picture that contains another size, the crop no longer retains the same performance

  3. Greetings,

    your script seems really nice but I can’t make it work as I would.

    I need to crop images which are larger than 430×260, the crop need to keep the 430/260 ratio with 430×260 as min-size and then I plan to resize the croped image to 430/260 with a PHP script. So, the user must be able to crop any image as long as it keeps 430/260 ratio.

    I use this script (with lastest mootools core + more) :
    #####

    // Mootools crop
    var ch;
    window.addEvent(“domready”, function() {
    ch = new CwCrop({
    minsize: {x: 430, y: 260},
    fixedratio: 1.653846,
    onCrop: function(values) {
    document.forms[“crop”].elements[“crop[x]”].value = values.x;
    document.forms[“crop”].elements[“crop[y]”].value = values.y;
    document.forms[“crop”].elements[“crop[w]”].value = values.w;
    document.forms[“crop”].elements[“crop[h]”].value = values.h;
    alert(“Selected area is: ” + values.x + “,” + values.y + ” @ ” + values.w + ” x ” + values.h);
    /*
    Here the form should be submitted usually (instead of the alert..):
    document.forms[“crop”].submit();
    */
    }
    });
    });

    #####

    When the script starts, I’ve everything ok, the crop is set to 430×260.
    But once I start to resize the crop area it switch from 430×260 to 200×121 then back to 430×260 and vice versa.

    Am I doing something wrong ?
    Is the script able to only resize the crop with fixed ratio to 430/260 and min-size 430×260 ?

    Thanks for any help =]

    1. Hi –

      I see. I tried and it seems there are problems with maxsize, so for me it works if I set maxsize like this:

      minsize: {x: 430, y: 260},
      maxsize: {x: 999, y: 999},
      fixedratio: 1.653846,
      (…)

      Of course you can use another value instead of 999 if the image might be bigger.

      Hope that helps – otherwise write a comment!

      mario

  4. Hi Again,

    Could you share your php file (one use to crop from coord) didn’t see it when i downloaded the package

    thanks =)

    1. Yes that wasn’t supposed to be in the download package, because this depends a lot on what you are going to do – and not everyone uses php as server-side language.

      But I’ll have a look and put a standalone script here online – the one I currently use heavily depends on my own framework, so I’ve to rewrite it.

  5. Hi,

    really nice plug in :) however on your demo page, its always crop the same part of the image,even if i customized crop area. is it a bug?

    im under mozilla 4.0.1

    1. Hi –

      well, the wordpress cache-plugin I use here does its job a little bit too good :) You can press reload on the page with the cropped image, this should help.. But I’ll also check if I can exclude the result page from caching.

      (The Mootools plugin itself has no such problems, it simply delivers the coordinates of the cropped area.)

      mario

    1. Yes, it’s a bit a workaround – but for me it works well:

      Say ch is your CwCrop-Object and cropframe the id of the outer div, then try these two example buttons:

      <button onclick=”ch.options.fixedratio=2;ch.checkRatio($(‘cropframe’),null)”>wide</button>
      <button onclick=”ch.options.fixedratio=0.5;ch.checkRatio($(‘cropframe’),null)”>tall</button>

      Regards,
      Mario

  6. Hi,

    Thanks for this great script. It works like a charm :-)

    I just have one little problem.
    The opacity of the image to crop is set to 0.5 : this is ok.

    But the crop area appears to be set to 0.5 as well whereas it should be 1.
    I tried to modify the css with opacity:1 in #cropframe and #cropframe.active but it does not work.

    Do you have an idea how I can fix that ?
    Best regards,

        1. The #cropframe has a background-image set to display the selected image area, maybe that is the problem on your page.

          Otherwise, I’d try out the following:

          – Make a copy of your page and comment out all your stylesheets
          – Step by step enable different parts of your stylesheets, until the problem appears..

          (If that really doesn’t help you can send me the URL then I’ll have a look)

          1. “The #cropframe has a background-image set to display the selected image area, maybe that is the problem on your page.”

            If the problem is coming from this, is there a way to correct it ?

            Otherwise I will do what you advice.

            1. This might happen, if you set the background for #cropframe or .div and overwrite the background-image setting.

              UPDATE: Problem solved, the background-images for #cropframe and #imglayer were not the same.

  7. Hi there,

    Great plugin. One question though. Is there a setting for fixed ratio, cause I couldn’t find it and it would really be usefull?

    Thanks,
    Daniel

    1. Hi –

      you can set maxratio: {x: 1, y: 1}then there’s a fixed ratio of 1. For other cases it’s not yet possible, but I’ll add it in the next release, good idea.

Leave a Reply

Your email address will not be published. Required fields are marked *