基于canvas的jQuery图片剪裁插件

canvas 图片剪裁 2018-06-20

控件介绍
imageResizer是一款基于canvas的jQuery图片剪裁插件。它使用简单,可以基于HTML5 canvas实现图片的平移和剪裁。
浏览器兼容

支持IE9+

演示下载 15648
使用方法

使用方法

在页面中引入jquery和jquery.resizeImage.js,以及样式文件style.css。

1
2
3
<link href="css/style.css" rel="stylesheet">
<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.resizeImage.js"></script>
HTML结构

然后在页面中创建一个信息面板和一个图片剪裁容器。

1
2
<div id="infoContainer"></div>
<div id="cropContainer"></div>
初始化插件

在页面DOM元素加载完毕之后,通过resizeImage()方法来初始化该jquery图片剪裁插件。

1
2
3
4
$('#cropContainer').resizeImage({
  image: 'demo.jpg',
  btnDoneAttr: '.resize-done'
});

如果要显示剪裁后的图片,可以使用下面的方法。

1
2
3
4
5
6
$('#cropContainer').resizeImage({
  image: 'demo.jpg',
  btnDoneAttr: '.resize-done'
}, function( imgResized ){
  $('#infoContainer').html( '>limg src="'+ imgResized +'"<' )
})

配置参数

该jquery图片剪裁插件的可用配置参数有:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$('#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'
   
})

该jquery图片剪裁插件的github地址为:https://github.com/fabrice8/imageResizer

本文转载请注明出处:http://www.zhuiye.com/detail_735.html