By RoboKozo


2013-02-15 21:16:12 8 Comments

I'm using jcrop and trying to make a "live" preview of the cropped area on an image.

The movement of the selected area works perfectly if the "Crop Selection" area is the same height and width as the destination preview div.

Check out the issue here: http://jsfiddle.net/fbaAW/

function showCoords(c) 
{
    var $this = this.ui.holder;


    var original = $this.prev();
    var preview = original.parent().find(".image");

    var oH = original.height();
    var oW = original.width();

    var pH = preview.height();
    var pW = preview.width();

    var sH = c.h;
    var sW = c.w;

    var differenceH = pH - sH;
    var differenceW = pW - sW;


    //preview.css('width', c.w);
    //preview.css('height', c.h);

    //preview.css("background-size", Math.round(oW + differenceW) + "px" + " " + Math.round(oH + differenceH) + "px");

    preview.css("background-position", Math.round(c.x) * -1 + "px" + " " + Math.round(c.y) * -1 + "px");
}

As you can see, I've commented out a few of my tests and attempts at getting this code to work properly but I just can't wrap my head around the relationship between the position and the size background properties in order to get this effect to work correctly.

1 comments

@bfavaretto 2013-02-15 21:36:39

Calculate the horizontal and vertical ratios between the selection size and the preview area size:

var rW = pW / c.w;
var rH = pH / c.h;

Then apply them to the background-size and background-position:

preview.css("background-size", (oW*rW) + "px" + " " + (oH*rH) + "px");
preview.css("background-position", rW * Math.round(c.x) * -1 + "px" + " " + rH * Math.round(c.y) * -1 + "px");

http://jsfiddle.net/fbaAW/1/

So, if the preview size is, say, 3 times the size of your jCrop selection area, it means you have scale the original image by 3, and compensate for the scaling when defining the background position.

Related Questions

Sponsored Content

23 Answered Questions

[SOLVED] Preview an image before it is uploaded

22 Answered Questions

[SOLVED] Vertically align text next to an image?

30 Answered Questions

[SOLVED] How do I give text or an image a transparent background using CSS?

  • 2009-04-30 09:00:02
  • Stijn Sanders
  • 1524976 View
  • 2294 Score
  • 30 Answer
  • Tags:   html css opacity

2 Answered Questions

2 Answered Questions

[SOLVED] Jcrop image does not show correctly in preview

5 Answered Questions

[SOLVED] Using jcrop on responsive images

1 Answered Questions

[SOLVED] Jcrop issue if image is resized - Jquery

1 Answered Questions

[SOLVED] JCrop get cropped width and height

1 Answered Questions

JCropped Get Cropped Image Height

1 Answered Questions

[SOLVED] Jcrop with resizing preview

Sponsored Content