imageResizer是一款基于canvas的jQuery图片剪裁插件。它使用简单,可以基于HTML5 canvas实现图片的平移和剪裁。
使用方法
在页面中引入jquery和jquery.resizeImage.js,以及样式文件style.css。
<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结构
然后在页面中创建一个信息面板和一个图片剪裁容器。
<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' })
该jquery图片剪裁插件的github地址为:https://github.com/fabrice8/imageResizer
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!