jCrop - update preview onload?

问题

I am using the jCrop preview demo to do my own thing. However I have run into a problem. If I create a default selection when the image loads using setSelect: then I have the selection mapped out on the big image but it doesn't appear on the preview. I cannot find an api handler to call the updatePreview function when jCrop loads. Does anyone know how to call this function when jCrop loads?

jQuery(function($){

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;

      $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        setSelect: [ 0, 0, selectWidth, selectHeight ],
        aspectRatio: 1
      },function(){
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;
      });

      function updatePreview(c)
      {
        if (parseInt(c.w) > 0)
        {
          var rx = 100 / c.w;
          var ry = 100 / c.h;

          $('#preview').css({
            width: Math.round(rx * boundx) + 'px',
            height: Math.round(ry * boundy) + 'px',
            marginLeft: '-' + Math.round(rx * c.x) + 'px',
            marginTop: '-' + Math.round(ry * c.y) + 'px'
          });
        }
      };

    });

回答1:

I tried to set the default value and the default value is getting previewed in the preview box.

jQuery(window).load(function(){

            jQuery('#cropbox').Jcrop({
                onChange: showPreview,
                onSelect: showPreview,
                setSelect: [ 100, 0, 100, 100 ],
                aspectRatio: 1
            });

        });

This just worked the way i wanted. You might have some other error on your script. But you dont have to invoke anything special to have to show the preview. If you are not doing this onload then try doing it onload.

回答2:

Rather than the animateTo hack, you can just set the initial selection in the callback. So:

$('#target').Jcrop({
    onChange: updatePreview,
    onSelect: updatePreview,
    aspectRatio: 1
  },function(){
    // Use the API to get the real image size
    var bounds = this.getBounds();
    boundx = bounds[0];
    boundy = bounds[1];
    // Store the API in the jcrop_api variable
    jcrop_api = this;
    jcrop_api.setSelect([ 0, 0, selectWidth, selectHeight ]); // <--
  });

回答3:

I couldn't get this to work either and found your question searching for a solution myself.

I'm using the preview demo (tutorial3) in Jcrop v0.9.9.

Changed jQuery(function($){ to jQuery(window).load(function(){

And added the option setSelect: [ 0, 40, 312, 244 ]

And, it doesn't update the preview on load..

The workaround I've found is to use the api animateTo as well as setSelect (or on it's own if you like the animation, the speed of which you can change with the option swingSpeed)

I've made the change in your code

jQuery(function($){

  // Create variables (in this scope) to hold the API and image size
  var jcrop_api, boundx, boundy;

  $('#target').Jcrop({
    onChange: updatePreview,
    onSelect: updatePreview,
    setSelect: [ 0, 0, selectWidth, selectHeight ],
    aspectRatio: 1
  },function(){
    // Use the API to get the real image size
    var bounds = this.getBounds();
    boundx = bounds[0];
    boundy = bounds[1];
    // Store the API in the jcrop_api variable
    jcrop_api = this;
    jcrop_api.animateTo([ 0, 0, selectWidth, selectHeight ]);
  });

  function updatePreview(c)
  {
    if (parseInt(c.w) > 0)
    {
      var rx = 100 / c.w;
      var ry = 100 / c.h;

      $('#preview').css({
        width: Math.round(rx * boundx) + 'px',
        height: Math.round(ry * boundy) + 'px',
        marginLeft: '-' + Math.round(rx * c.x) + 'px',
        marginTop: '-' + Math.round(ry * c.y) + 'px'
      });
    }
  };

});

来源：https://stackoverflow.com/questions/7254767/jcrop-update-preview-onload

标签

javascript

jquery

jcrop