色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery.jcrop.js api

阮建安1年前8瀏覽0評論

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