画像切り抜き用の JQuery Jcrop プラグイン_jquery

は次のとおりです:

コードは次のとおりです:


$(
function()
{
$("#demoImage ").Jcrop();

コードは次のとおりです。



;x1
y1
x2
y2

$(function(){
//Event processing
$("#demoImage").Jcrop({
onChange:showCoords, //When the selection area changes, execute Corresponding callback function
onSelect:showCoords //When an area is selected, execute the corresponding callback function
});
});
function showCoords(c) {
$(" #txtX1").val(c.x); //Get the abscissa coordinate of the upper left corner of the selected area
$("#txtY1").val(c.y); //Get the ordinate coordinate of the upper left corner of the selected area
$(" #txtX2").val(c.x2); //Get the abscissa of the lower right corner of the selected area
$("#txtY2").val(c.y2); //Get the ordinate of the lower right corner of the selected area
$("#txtWidth").val(c.w); //Get the width of the selected area
$("#txtHeight").val(c.h); //Get the height of the selected area
}

aspectRatio: The selected area is based on the width/height ratio, 1 means square.
minSize: minimum width and height values.
maxSize: the maximum width and height value.
setSelect: Set the initial selected area.
bgColor: Background color
bgOpacity: Background transparency.
allowResize: Whether to allow changing the size of the selected area.
allowMove: Whether to allow moving the selected area.

$(function() {
$("#demoImage").Jcrop({
aspectRatio: 1, //The aspect ratio of the selected area is 1, that is, the selected area is a square
bgColor:"#ccc ", //The background color is set to gray when cropping
bgOpacity:0.1, //The transparency is set to 0.1
allowResize:false, //The size of the selected area is not allowed to change
setSelect:[0,0,100,100] //Initialize the selected area
});
});

var api = $.Jcrop("#demoImage");
api.disable(); //Set to Disable the cropping effect
api.enable(); //Set to enable the cropping effect
api.setOptions({allowResize:false});//Set the corresponding configuration
api.setSelect([0,0,100,100] ); //Set the selected area