基于canvas的jQuery图片剪裁插件

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'

})