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使用方法,希望可以對大家有所幫助。
上一篇css 字體 方正黑體
下一篇css 不重復位置