jquery.jcrop.js是一个基于jQuery的图片裁剪插件,可以帮助用户在Web应用中方便地进行图片裁剪操作。下面我们来看一下它的API。
// 初始化jCrop $('#image').Jcrop({ // 设置裁剪框大小及最小大小 aspectRatio: 1, minSize: [50, 50], // 设置预览框 boxWidth: 500, boxHeight: 500, onSelect: updatePreview, onChange: updatePreview }); // 裁剪完毕事件 function updatePreview(c) { if (parseInt(c.w) >0) { var scaleX = $('#preview-box').width() / c.w; var scaleY = $('#preview-box').height() / c.h; $('#preview-img').css({ width: Math.round(scaleX * $('#image').width()) + 'px', height: Math.round(scaleY * $('#image').height()) + 'px', marginLeft: '-' + Math.round(scaleX * c.x) + 'px', marginTop: '-' + Math.round(scaleY * c.y) + 'px' }); } }
上面是最基本的使用示例,我们可以通过设置aspectRatio属性来指定裁剪框的宽高比,通过minSize来指定最小裁剪尺寸。同时,我们可以设置onChange和onSelect事件来实时更新预览框的内容。
除此之外,还有一些常用的API:
// 获取当前裁剪框尺寸、坐标和图片实际尺寸 var bounds = $('#image').data('Jcrop').getBounds(); // 销毁jCrop对象 $('#image').data('Jcrop').destroy(); // 重新设置裁剪框大小 $('#image').data('Jcrop').setOptions({aspectRatio: 1}); // 改变当前裁剪框的大小及位置 $('#image').data('Jcrop').setSelect([x, y, w, h]);
以上就是jquery.jcrop.js的一些基本API使用方法,希望可以对大家有所帮助。