在做截图功能之前,在百度搜索,居然没发现extjs的头像截取例子,在完成这个以前,差点郁闷死。
做了半个月,自己研究,找人问,总算是搞出了属于我们自己的extjs的例子,分享给和我一样苦逼的程序员。
转做extjs头像截图功能,第一天,熟悉了下代码。整理了思路。发现extjs截图功能的实现,有些困难。因网上很难找到类似的代码,最后总结了下实现方案:
从插件着手,先从网上找了一大堆截图插件,发现使用最好,最合适ext的插件以jcrop插件最好。
官网地址:http://deepliquid.com/content/Jcrop_Download.html
插件了解完成,就进行插件的导入,引用。
第一步,先把jquery.Jcrop.css插件放入你想要引用的路径,这看你想放在那,记得要进行绝对路径的引用。
而jquery.min.js和jquery.jcrop.js,按照一般来说,可以直接放到你某一个文件夹里,然后引用,但是我经过多次测试,发现,他并没有引用到,后来,想了一个折中的办法,直接把这两个js的代码放入了js页面。这办法,对性能影响不大,就是代码多,比较繁重。
OK,万事具备,只欠代码:
接下来就要写代码,进行头像截图的实现,
items : [{
xtype : 'filefield',
name : 'file',
fieldLabel : "附件上传",
buttonText:"浏览",
labelWidth : 80,
columnWidth : 1,
allowBlank : false,
buttonConfig:{iconCls:'file'},
listeners:{
afterrender : function(){
jQuery(function cutImage(){
$('#target').Jcrop({
boxWidth: 450,minWidth:300,
boxHeight: 600,minHeigth:400,
onChange: showCoords,
onSelect: showCoords,
onRelease: clearCoords
},function(){
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_ap