imageResizer是一款基于canvas的jQuery图片剪裁插件。它使用简单,可以基于HTML5 canvas实现图片的平移和剪裁。
使用方法
在页面中引入jquery和jquery.resizeImage.js,以及样式文件style.css。
HTML结构
然后在页面中创建一个信息面板和一个图片剪裁容器。
<div id="infoContainer"></div>
<div id="cropContainer"></div>
初始化插件
在页面DOM元素加载完毕之后,通过resizeImage()方法来初始化该jquery图片剪裁插件。
$('#cropContainer').resizeImage({
image: 'demo.jpg',
btnDoneAttr: '.resize-done'
});
如果要显示剪裁后的图片,可以使用下面的方法。
$('#cropContainer').resizeImage({
image: 'demo.jpg',
btnDoneAttr: '.resize-done'
}, function( imgResized ){
$('#infoContainer').html( '>limg src="'+ imgResized +'"<' )
})
配置参数
该jquery图片剪裁插件的可用配置参数有:
$('#cropContainer').resizeImage({
// Formats: 3/2, 200x360, auto
imgFormat: 'auto',
// lg-md, sm-xs
device: 'all',
// true circle, square ( by default )
circleCrop: false,
// image zoom options
zoomable: true,
zoomMax: 2,
// black, white
outBoundColor: 'black'
})