Geek Answers Handbook

JCrop - Update Preview?

I am using jCrop demo to work on my own. However, I ran into a problem. If I create a default selection when the image is loaded using setSelect: then I have a selection displayed on a large image, but it does not appear in the preview. I can not find the api handler to call the updatePreview function when jCrop loads. Does anyone know how to call this function when loading jCrop?

 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(cw) > 0) { var rx = 100 / cw; var ry = 100 / ch; $('#preview').css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * cx) + 'px', marginTop: '-' + Math.round(ry * cy) + 'px' }); } }; });
+4
source share
3 answers

I tried to set a default value and the default value gets a preview in the preview window.

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

It just worked the way I wanted. Another error may occur in your script. But you do not need to call anything special to show a preview. If you are not doing this onload, try doing it onload.

+3
source

Instead of hacking animateTo, you can simply 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 ]); // <-- });
+8
source

I could not get this to work and found your question in finding a solution on my own.

I am using a preview demo (tutorial3) in Jcrop v0.9.9.

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

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

And it does not update the preview at boot.

The workaround I found is to use api animateTo , as well as setSelect (or your own, if you like the animation, the speed of which you can change using the swingSpeed option)

I made changes to my 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(cw) > 0) { var rx = 100 / cw; var ry = 100 / ch; $('#preview').css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * cx) + 'px', marginTop: '-' + Math.round(ry * cy) + 'px' }); } }; });
+5
source

More articles:


All Articles