声明:如果程序有问题,请各位大虾多多指点,谢谢。
基于psoft.js制作的一款图片裁剪应用
1.应用初始化之前。
2.点击browse按钮,选择图片后,自动上传图片,上传图片后,可以选择你要裁剪的区域,当然也可以放大,缩小,平移
<input type="file" name="cutFile" class="upload" onchange="ajaxSubmit()"/>
当然,对于你裁剪的图片的位置和比例可以在区域里看到,你也可以取消分割线
3.点击upload按钮,就行图片的上传。
function submitCut(){ if( !(imgRt && imgRt.name) ){ return; } psoft.createShade(); var l = parseInt( $d('srcImg').css('left') ); var t = parseInt( $$.css('top') ); var w = parseInt( $$.css('width') ); var h = parseInt( $$.css('height') ); var l0 = parseInt( $d('bg4').css('left') ) -l; var t0 = parseInt( $$.css('top') ) - t; var w0 = parseInt( $$.css('width') ); var h0 = parseInt( $$.css('height') ); psoft.ajax({ 'url':'photo.php', data:{ 'imgWidth':w, 'imgHeight':h, 'cutLeft':l0, 'cutTop':t0, 'cutWidth':w0, 'cutHeight':h0, 'src':imgRt.name, 'a':'cut' }, success:function(html){ $d('psoft_shade').hide(); html = eval('('+html+')'); $d('cutImg').attr({src:html.msg+'?'+new Date().getTime()}); }, fail:function(html){ $d('psoft_shade').hide(); alert(html); } }); }
查看裁剪的图片
发现,裁剪出来的图片跟预期一模一样。
技术总结:1.首先通过psoft.js封装的ajaxsubmit来上传图片。实现无刷新上传。
2.在图片裁剪图片时,精确获得相应裁剪图的位置和大小跟参数,后台通过php的gd库处理