淘先锋技术网

首页 1 2 3 4 5 6 7

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使用方法,希望可以对大家有所帮助。