jquery Jcrop and background capture pictures

Mainly the front desk work, the background is relatively simple jcrop

                $jQuery (' #target '). Jcrop ({
                          allowselect:true,
                          bgopacity:0.5,
                          baseclass: ' Jcrop ',
                          //bgopacity:. 6,
                          aspectratio:3/ 2,  //Set the weight of the selection box
                          boxwidth:600,//used to set the size of the canvas to scale the layout in multiples
                          boxheight:600,
                          onChange:   showcoords,
                          onSelect:   showcoords,
                          onrelease:  clearcoords
                     }, function () {
                        Jcropapi = this;
                        Jcropapi.setselect ([30,30,30+270,30+170]);
                        Alert (222);
                        Jcropapi.setimage (Bloburl);
                     });

function Showcoords (c)
{
jquery (' #x1 '). Val (c.x); jquery (' #x1 '). Val (c.x); JQuery (' #y1 '). Val (C.Y);
jquery (' #x2 '). Val (c.x2); jquery (' #x2 '). Val (c.x2); JQuery (' #y2 '). Val (c.y2);
jquery (' #w '). Val (C.W); jquery (' #w '). Val (C.W); JQuery (' #h '). Val (c.h);
};

X, y is the upper-left corner coordinate
W,h is width and height

Note here boxwidth: Is the canvas limit,
If the picture is so big that it's 2000px, then Boxwidth will limit him,
Such proportions are limited to boxwidth;
principle : The original Div, IMG Hidden, a new div img is scaled;
This time on the canvas size can be displayed under, Record XScale, Yscale;

When the onchange event is selected,
Callback Unscale, let scale and so on return, so you get X, y and width, height is the original value
The following related source code:

      function Update (SELECT)//{{{
      {
        var c = coords.getfixed ();

        Resize (C.W, c.h);
        MoveTo (c.x, c.y);
        if (Options.shade) Shade.updateraw (c);

        Awake | | Show ();

        if (select) {
          options.onSelect.call (API, Unscale (c));
        } else {
          Options.onChange.call (API, Unscale (c));
        }
      }

    function Unscale (c)//{{{
    {
      return {
        x:c.x * xscale,
        y:c.y * yscale,
        x2:c.x2 * x Scale,
        y2:c.y2 * yscale,
        W:C.W * XScale,
        h:c.h * Yscale
      };
    

Only need to put X, Y, W, h into the background, and then upload the original image to the background, the background image interception can be