asimkumar2222 / javascript-image-cropper-ui Goto Github PK

onEndCrop is not called after moving area with keyboard

displayOnInit: true doesn't work with minWidth and minHeight, it works only
with ratio.

What steps will reproduce the problem?
1. IE 7/8/9
2. Init code:
imageCropper = new Cropper.Img(
                'wallpaperImage',
                {
                    minWidth: initialValues.w,
                    maxWidth: initialValues.w,
                    minHeight: initialValues.h,
                    maxHeight: initialValues.h,
                    onEndCrop: wallpaperCreator.setPosition,
                    onloadCoords: { x1: initialValues.p, y1: 0, x2: initialValues.p+initialValues.w, y2: initialValues.h }
                }
            );
            imageCropper.drawArea();
/* Inital values are set properly */

What is the expected output? What do you see instead?
Expecting working cropper. See "SCRIPT5007: Unable to get value of the property 
„x2”: object is null or undefined"

What version of the product are you using? On what operating system?
cropper 1.2.2, Windows 7 x64

Please provide any additional information below.

It looks like cropper is trying to get coords values before there have been 
initialized.

What steps will reproduce the problem?
1. Create a selection using either a square or fixed aspect ratio selection
constraint.
2. Grab one of the edge handles to resize
3. While resizing, exactly one handle retains it's position, but it's
always a corner handle, not an edge handle.

What is the expected output? What do you see instead?

Ideally the opposite edge handle will not move, and all 4 of the corner
handles should move to allow this.

Since I still don't quite understand applyRatio, and it is used in a fairly
generic manner, it is unclear to me how to apply this fix.  Maybe
"direction" attributes should have three possible values (-1, 0, 1) in
order to model the different desired behaviors?

Make ratioDim optional on preview version, this will allow us to have
previews that show the output of the crop when no further resizing will be
performed. The current preview version assumes the crop will be to a target
size (e.g. for an avatar image) either by means of a fixed cropper size or
by resizing the image once cropped.

What steps will reproduce the problem?

1. Go to http://www.defusion.org.uk/code/javascript-image-cropper-ui-
using-prototype-scriptaculous/
2. Read the 'Usage' section
3. Use the included snippet of HTML <script src> code with cropper 1.2.1, 
prototype 1.6.1 and scriptaculous 1.8.3

What is the expected output? What do you see instead?

You get a JavaScript error in browser: "Effect is not defined"

What version of the product are you using? On what operating system?

Firefox 3.5.8 (Linux)
Prototype 1.6.1
Scriptaculous 1.8.3
Cropper 1.2.1

Please provide any additional information below.

This didn't used to be a problem with older versions of scriptaculous (it 
was fine with prototype 1.5.0_rc0, scriptaculous 1.6.1 and cropper 1.2.0)

This is how your example code currently looks (specifically the line 
which sources scriptaculous):

<script type="text/javascript" src="scripts/cropper/lib/scriptaculous.js?
load=builder,dragdrop" language="javascript"></script>

The problem is solved by adding additional load parameter to 
scriptaculous.js - i.e. add 'effects' at the beginning:

<script type="text/javascript" src="scripts/cropper/lib/scriptaculous.js?
load=effects,builder,dragdrop" language="javascript"></script>

Consider a site (e.g. Facebook) where an profile picture is of a fixed
width (W), but cannot exceed a certain height (H). This requires a cropper
than limits the crop to any ratio R such that R <= W/H.

This can be presented the user as an option to allow the ratio to be
"wider", "taller" or "exactly the same" as the given value.

Attached patch implements this as a initialisation option "ratioType".

When updating the image using setParams when using ImgWithPreview class the
preview image does not update.

What steps will reproduce the problem?
works when commenting :

Object.extend( Object.extend( CropDraggable.prototype, Draggable.prototype), {

    initialize: function(element) {
        this.options = Object.extend(
            {
                /**
                 * The draw method to defer drawing to
                 */
                drawMethod: function() {}
            }, 
            arguments[1] || {}
        );

        this.element = $(element);

        this.handle = this.element;

        this.delta    = this.currentDelta();
        this.dragging = false;   

        this.eventMouseDown = this.initDrag.bindAsEventListener(this);
        Event.observe(this.handle, "mousedown", this.eventMouseDown);

        Draggables.register(this);
    },

    /**
     * Defers the drawing of the draggable to the supplied method
     */
    draw: function(point) {
        /*var pos = Position.cumulativeOffset(this.element);
        var d = this.currentDelta();
        pos[0] -= d[0]; 
        pos[1] -= d[1];

        var p = [0,1].map(function(i) { 
            return (point[i]-pos[i]-this.offset[i]) 
        }.bind(this));

        this.options.drawMethod( p );*/
    }

});

What version of the product are you using? On what operating system?
Using version 1.2.0 on Linux (debian) with Firefox 3.0.1

Please provide any additional information below.

How is it possible to change the Dimension od teh cropper at runtime
(without reloading the page).?

Thanks

Could you extend your toolkit so that it can handle polygon ROIs?

If constructor called from inside method in IE7 a white overlay is
displayed over image (see fialik comments)

The cropper references cropper.js file when finding the path to use to
include the stylesheets.  Change to be more flexible so developers can swap
out with uncompressed version when testing/extending.

This is an enhancement possibility.
Is there a way to make the dragable area appear circular instead of
square/rectangle?
I have written some code that will crop to a circle in php that could go
with it.

What steps will reproduce the problem?
Open a demo on Google Chrome

What is the expected output? What do you see instead?
The Cropper overlaps the background. The resize/move options doesn't work.

What version of the product are you using? On what operating system?
1.2.1 (actual version)
Windows 7 (32)
Google Chrome 8.x

Please provide any additional information below.
Works fine on IE 7,8, Firefox 3.x

What steps will reproduce the problem?
1. Place an image to be cropped within a Bootstrap .modal div
2. Call jQuery('#themodal').modal()
3. Resize diagonally or vertically

What is the expected output? What do you see instead?
I expect the corner I'm dragging to be located where my cursor is. Instead, it 
extends below that, by an apparently random amount.

What version of the product are you using? On what operating system?
cropper.js 1.2.2 (lifted from demo page) on latest Chrome install, Windows 8.1

Please provide any additional information below.
If I run jQuery('.modal').css('position','absolute') then the bug resolves 
(though the effect that has on the modal is unknown). Apparently this bug has 
something to do with being inside a block level element with fixed position 
while using Chrome; as such, Bootstrap modal is an example, not an exclusive 
case.

Create an image navigator (in a similar vein to that found in Photoshop)
for use when zooming images. See issue 1.

Hi,
it's very good script ^^

My requests is for save the picture (crops + preview<= save preview)in PC 
or server.

it's possible ?

Thanx

What steps will reproduce the problem?
I have a situation where the cropper is used in an <iframe>
iframe is loaded (in a div) the cropper appears normal.
2nd time the iframe is loaded, there is no transparency of the cropper 
components and the image gets blocked from view.

What is the expected output? What do you see instead?
I would expect that each time the iframe is loaded it should consistently 
display the image with cropper.

What version of the product are you using? On what operating system?
v. 1.2.0 - 2006-10-30 

Please provide any additional information below.
Is there a version of cropper that works with the latest versions of 
prototype.js and scriptaculous?

The masked area goes white with the background as black and the Preview 
section shows the actual image. It's totally not usable... Kindly help.

When the source image is smaller than the minimum dimensions then it does
not display properly.

ImgWithPreview does not implement the ability to be removed when cropper
removed

What steps will reproduce the problem?
1. Using Internet Explorer 9.0.8112.16421 (Update Version: 9.0.3)
2. Load demo page (from author site)

What is the expected output? What do you see instead?
Result intermittently loads cropper but most of the time fails without error, 
just doesn't display the cropper ui.

What version of the product are you using? On what operating system?
Using Windows 7 Pro (64 Bit) - Internet Explorer 9.0.8112.16421 (Update 
Version: 9.0.3) and 1.2.2 of cropper (upgraded to try and fix issue but still 
remains).

Please provide any additional information below.
Done some digging and can get it to work by setting the line

if (this.img.complete || this.isWebKit) {

to

if (this.img.complete || this.isWebKit || 1=1) {

to bypass using

Event.observe(this.img, 'load', this.onLoad.bindAsEventListener(this));

to bind the event, guess that there is something not right about handling the 
image load event in IE.

onEndCrop always called when mouse is clicked anywhere - regardless of
whether currently drawing/changing select area

I needed to add a border to cropper.js that is not croppable.

By adding this piece of code i stumbled upon a bug that has no effect when 
using the image-
dims (0,0) - (w,h) within applyRatioToAxis as bounds

it should be  
calcDimB = newCoords.b2 - targB; // calcuate dimension b (e.g. height) 

instead of 
calcDimB = targB  + newCoords.b2 // calcuate dimension b (e.g. height) 

best
Paul

What steps will reproduce the problem?
1. Open IE 9 browser and test the examples

What is the expected output? What do you see instead?

Expected cropper to load and work


What version of the product are you using? On what operating system?

Latest, windows 7 64 IE9


Please provide any additional information below.

AFAIK there is no way to turn off image cropper so there is no way to use
it in AJAX applications.

What steps will reproduce the problem?
1. Use in modal panel (in my case RichFaces one)
2. Scroll a bit the full page
3. Test click in picture

What is the expected output? What do you see instead?

Expecting selection on real mouse position, instead, selection start the
scrolling offset below the expected position.

What version of the product are you using? On what operating system?

jsCropper 1.2.0 on Firefox 3.0.7 on Windows XP SP3 with Tomcat server

Please provide any additional information below.

I've modified my cropper.js in getCurPos function :

---------------------------------------------

getCurPos: function( e ) {
        // get the offsets for the wrapper within the document
        var el = this.imgWrap;

        var wrapOffsets = Element.cumulativeOffset( el );
        var wrapScrollers = Element.cumulativeScrollOffset( el );

        return curPos = {
            x: Event.pointerX(e) - wrapOffsets[0] - wrapScrollers[0],
            y: Event.pointerY(e) - wrapOffsets[1] - wrapScrollers[1]
        }
    },

-------------------------------------------------

with this new code, it is working properly. Note, i'm using javascript
libraries from RichFaces.

Libraries versions :

prototype.js 1.6.0.X
scriptaculous.js 1.8.2
builder.js 1.8.2
dragdrop.js 1.8.2

Hope it will help someone!

What steps will reproduce the problem?
1. Install firefox 3.5
2. Open example

What is the expected output? What do you see instead?
You can see the image, but no cropper interface on top.

What version of the product are you using? On what operating system?
OS X 10.5.7 Firefox 3.5

What steps will reproduce the problem?
1. Just running it on IE6.0

What is the expected output? What do you see instead?
You can only see a black surface and the cropped area is white, but the
handles are visible.

What version of the product are you using? On what operating system?
I just downloaded it last week, I suppose it to be the lastest version. I'm
using Windows XP.

Please provide any additional information below.
One of the problems could be that I not actually using IE6.0 Im just using
a very nifty (and accuret as far as I know) emulator.

What steps will reproduce the problem?
1. Use JavaScript to create a floating DIV containing an image and a button to 
close the div.
2) activate the cropper on that image
3) Click the button to close the div

What is the expected output? What do you see instead?

As it is, when you close the DIV and the image is removed from the DOM, all the 
Cropper event listeners are still active and onEndCrop continues to be called 
on every mouse click.

When the img tag is removed from the DOM I'd like to see the Cropper object 
destroyed as well. That doesn't happen, so we need some kind of close() method 
that will remove the Cropper's event listeners.



What version of the product are you using? On what operating system?

1.2.1, in Firefox on Linux

Please provide any additional information below.

What steps will reproduce the problem?
1. IE8 / IE9
2. Loading the content via ajax modal dialog, initially invisible. Not exactly 
sure what the exact cause is.
3. img.getAttribute("height") and img.getAttribute("width") always return 0.

What is the expected output? What do you see instead?

Throws an exception on:

eastStyle.width = params[6];

(value of params[6] is -20px due to image size 0, 20px minWidth is set.)


Please provide any additional information below.


Using the following code to create the cropper:

var crop_image = $('crop-image');

var min_width = 20;
var min_height = 15;

var image_width = crop_image.width > 0 ? crop_image.width : 
parseInt(crop_image.currentStyle.width, 10);
var image_height = crop_image.height > 0 ? crop_image.height : 
parseInt(crop_image.currentStyle.height, 10);

this.image_cropper = new Cropper.ImgWithPreview('crop-image', {
    autoIncludeCSS: false,
    ratioDim: { x: min_width, y: min_height },
    minWidth: min_width,
    minHeight: min_height,
    previewWrap: 'crop-preview',
    displayOnInit: true,
    onloadCoords: {
        x1: Math.floor(image_width * 0.25), y1: Math.floor(image_height * 0.25),
        x2: Math.floor(image_height * 0.75), y2: Math.floor(image_height * 0.75)
    }
});


------------------------------


Fixed by using img.currentStyle.width / height in stead:

~line 597 -------------------------

        this.imgW = this.img.width > 0 ? this.img.width : parseInt(this.img.getAttribute("width"));
        if (this.imgW == 0) this.imgW = parseInt(this.img.currentStyle.width);

        /**
        * @var int
        * The image height
        */
        this.imgH = this.img.height > 0 ? this.img.height : parseInt(this.img.getAttribute("height"));
        if (this.imgH == 0) this.imgH = parseInt(this.img.currentStyle.height);



~line 1026 -----------------------

        var imgW = this.img.width > 0 ? this.img.width : parseInt(this.img.getAttribute("width"));
        if (imgW == 0) imgW = parseInt(this.img.currentStyle.width);

        var imgH = this.img.height > 0 ? this.img.height : parseInt(this.img.getAttribute("height"));
        if (imgH == 0) imgH = parseInt(this.img.currentStyle.height);

In my application I switch between images and preserve each image's 
cropper values, however if I use the following code to display the cropper 
with the image's previously saved cropper settings, I must calculate 
ratioX and ratioY manually and supply them, even though I am supplying 
ratioDim.  Without supplying them, the fixed ratio is not applied.

The code below works, but see the comments.
cropX1, cropX2, cropY1, and cropY2 are all saved previously onEndCrop
targetRatio is calculated from user input values for a target output image 
size.

-----------
crop.options.onloadCoords = { x1: cropX1, y1: cropY1, x2: cropX2, y2: 
cropY2 };
crop.options.ratioDim = { x: targetRatio, y: 1 };
crop.options.onEndCrop = oec;

//this part could be recalculated by setParams, but is not      
var gcd = crop.getGCD( crop.options.ratioDim.x, crop.options.ratioDim.y );
crop.ratioX = crop.options.ratioDim.x / gcd;
crop.ratioY = crop.options.ratioDim.y / gcd;

crop.reset();
----------------

To expand on this further, it should be rather trivial to add a function 
that allows us to reset cropper settings without needing to access the 
cropper parameters directly.  The function could use the same syntax as 
the constructor, but would obviously just reset the cropper rather than 
creating a new object.

What steps will reproduce the problem?
1. using  scriptcalous cropper setting images at runtime with there width and 
height.
2. Setting the cropper minwidth and minHeight at runtime .RemoveCropper 
function doesnot 
work.
after removing the cropper and attaching again is showing two cropper on the 
image ie the 
previous one and the new one as well.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?


Please provide any additional information below.

What steps will reproduce the problem?
1. I am using JSP to upload and edit the image.
2. In IE (6,7,8) the image gets uploaded but it doesnt give crop option.Rather 
browser exception comes as "cropper.ImgWithpreview is null or not an object"
3. Same works fine with Mozilla.

What is the expected output? What do you see instead?
The cropping option should be available.

What version of the product are you using? On what operating system?
jsCropperUI-1.2.1 , Server OS - HPUX, Local OS- Windows XP, IE 6,7,8(any 
version)

Please provide any additional information below.

What steps will reproduce the problem?
Opera (all versions till last) doesn't create cropper object. It shows
broken cropper on image and I couldn't resize it.
I guess, it's because of using Prototype 1.6.0.2 and Scriptaculous 1.8.1.

What steps will reproduce the problem?
1. Put max-width = 100px to an image
2. Crop
3. See returned dimensions

What is the expected output? What do you see instead?
When resizing a 2000x2000px image, shown as a 100x100px one, let's say to 
50pxx50px, I would expect 1000x1000px...

What version of the product are you using? On what operating system?
Latest one. OSX, Safari, Mountain Lion.

Please provide any additional information below.

What steps will reproduce the problem?
1. go to any sample test html file and using javascript set the width,height 
and image url of the 
img tag.
2. it will give the javascript error in IE6 in FF it works fine.
3.

What is the expected output? What do you see instead?


What version of the product are you using? On what operating system?
IE6

Please provide any additional information below.

IE7 stays on 100% cpu.

Any ideea?

What steps will reproduce the problem?
1. Replace the bundled Scriptaculous 1.6 with latest version 1.8.2
2. Open tests HTML page

What is the expected output? What do you see instead?
Croppper properly initiated. Firebug console shows that DragnDrop and
Effect lib of Scriptaculous are not found.

What version of the product are you using? On what operating system?
FF 3.010, Mac Leopard 10.5.6

Please provide any additional information below.

On firefox when creating cropper on gif animations creates multiple
instances of cropper. On IE the same trouble, but also browser crashes.

What steps will reproduce the problem?

This is my set up:
1: I upload an image that is passed to a php file through an iFrame.
2: The uploaded image is being processed by the php file and returns the 
result to the js function "updateImgLarge"
3: updateImgLarge creates a new image element and puts the newly uploaded 
file as the src. then it loads the js function "loadCropper".
4: then you can crop the image and save the thumbnail by submitting the 
crop values to a php file that creates the image.


What is the expected output? What do you see instead?

After cropping the first image and uploading a second image, the cropping 
values do not change. 
You can adjust the cropping rectangle but the values stay the same as the 
previous crop that you made with the other image.
As a result when hitting the upload thumbnail button you will get a crop 
of the new image but with the same coordinates as the first image that you 
cropped.

This only happens in IE7, it works fine in FF and Chrome. I did not test 
it in IE8.


What version of the product are you using? On what operating system?
I am using the same version as in the demo file on Windows Vista 64.


Please provide any additional information below.

Some of the code that I used:


<script type="text/javascript" language="javascript">


        function updateImgLarge(img_src, w, h, img_name){

            document.getElementById("testWrap").innerHTML 
= ""; 

            var newImg = document.createElement("img");
            document.getElementById("testWrap").appendChild
(newImg);

            newImg.src = img_src;
            newImg.width = w;
            newImg.height = h;
            newImg.id = "testImage";

            document.crop_img.reset();
            document.getElementById('th_file_ext').value = 
img_name;

            loadCropper();
        }






    function onEndCrop( coords, dimensions ) {
        $( 'x1' ).value = coords.x1;
        $( 'y1' ).value = coords.y1;
        $( 'x2' ).value = coords.x2;
        $( 'y2' ).value = coords.y2;
        $( 'width' ).value = dimensions.width;
        $( 'height' ).value = dimensions.height;
    }

    function loadCropper(){ 
        new Cropper.ImgWithPreview(
            'testImage',
            {
                previewWrap: 'previewWrap',
                minWidth: 120,
                minHeight: 120,
                ratioDim: { x: 120, y: 120 },
                onEndCrop: onEndCrop
            }
        );
    }

</script>

    <span class="iframe_container">
        <iframe id="submit_target" name="submit_target" src="#" 
style="width:0;height:0;border:0px solid #000;"></iframe>
    </span>


    <form action="img_functions.php" method="post" 
target="submit_target" enctype="multipart/form-data">

        <h2>Upload Photo</h2>

        Photo <input type="file" name="image" size="30" /> 

        <input type="hidden" name="upload" />
        <input type="submit" value="upload!" />
    </form>

    <br /><br />


    <div id="testWrap">

    </div>


    <div id="previewOuterWrap">
        <h2>Crop preview:</h2>
        <div id="previewWrap"></div>
    </div>
    <span class="clear_float"></span>


    <form name="crop_img" id="crop_img" action="img_functions.php" 
method="post" target="submit_target">
        <div id="results">
            <h2>Crop values:</h2>
            <div>
                <label for="x1">x1:</label>
                <input type="text" name="x1" id="x1" 
size="4" />
            </div>
            <div>
                <label for="y1">y1:</label>
                <input type="text" name="y1" id="y1" 
size="4" />
            </div>
            <div>
                <label for="x2">x2:</label>
                <input type="text" name="x2" id="x2" 
size="4" />
            </div>
            <div>
                <label for="y2">y2:</label>
                <input type="text" name="y2" id="y2" 
size="4" />
            </div>
            <div>
                <label for="width">width:</label>
                <input type="text" name="width" id="width" 
size="4" />
            </div>
            <div>
                <label for="height">height:</label>
                <input type="text" name="height" 
id="height" size="4" />
            </div>
        </div>

        <input type="hidden" name="file_ext" value="" 
id="th_file_ext" />
        <br />
        <input type="submit" name="upload_thumbnail" 
value="upload!" />
    </form>

What steps will reproduce the problem?
1. Upload a large image larger than 2000x2000 (E.g. out of the camera)

The image then uploads and is HUGE E.g. you have to scroll and scroll to see 
the edges of the image. cropping is really hard.

Is it possible to make the image being cropped smaller and fit on the screen 
without having to scroll to see the rest of the image?

E.g. 
if( image is large )
{  
make image 50% in size so it fits on the screen 
}

THANK YOU!

Can you allow cropper to rotate?

[deleted issue]

Allow zooming of the image

Here is my code : 
new Cropper.ImgWithPreview( 
'testImage',
    { 
    minWidth: 250, 
    minHeight: 250,
    ratioDim: { x: 470, y: 470 },
    displayOnInit: true, 
    onEndCrop: onEndCrop,
    previewWrap: 'previewArea'
    } 
) 

Everything seems to be perfect. But... Is it possible to have a bigger
preview than the minWidth or minHeight ?
Because at this time, it's the same size.

So I can't have a big preview for a small selection...

Can somebody help me?

thanks