在此过程中,笔者遇到了一些往常没有遇到过的问题,通过Google和查找API找到了解决问题的方法,在此整理出来与遇到同样问题的朋友们分享。
首先,笔者在用input:file上传图片的时候,更改了控件了样式,用input:text和input:button这两个控件来代替input:file,原来的input:file控件隐藏,如此,只需要更改后两个控件的样式,并且添加他们与input:file的关联即可。具体代码如下:
HTML:
<span style="font-family:Times New Roman;font-size:14px;"><input type=file id="xxx" name=orifile style="xxx;display:none;" onChange="$('input[name=\'filetext\']').val($(this).val());"/>
<input type=text name=filetext class="sss" style="xxx"/>
<input type=button value="submit" οnclick="$('input[name=\'orifile\']').click();" class="xxx" style="xxx"/></span>
笔者在系统中,需要绑定input:file控件的onChange事件,而且能够在该控件能够连续不断的触发onChange事件。在jquery1.7之前的版本中,可以通过jQuery.live()事件进行绑定,但是在jquery1.7之后的版本,live方法已经被弃用了,转而取代它的是on方法,可以笔者在通过on方法绑定onChange事件时,只能够触发一次。
在查阅过大量资料以后,笔者对代码进行了改进,改进的过程如下:
JAVASCRIPT:
<span style="font-family:Times New Roman;font-size:14px;">$(document).on("change", "#xxx", function(){
函数体...
});</span>
静态的方法可以通过$("#xxx").on("change", function(){});的写法进行,而如果input:file是动态方法生成的控件,则需要用代码框中的方法,因为onChange事件需要在页面加载之后才能加载。
笔者使用Jcrop这款JQuery插件来处理图像剪裁的,这款插件相对比较简单易学,有三种方法可以对插件进行加载,笔者建议使用Jcrop的api,具体代码如下:
JAVASCRIPT:
<span style="font-family:Times New Roman;font-size:14px;">/*选框大小固定为1000*160,不允许更改选框大小*/
var api;
var opt = {};
opt.allowResize = false; //不允许更改选框大小
opt.allowSelect = false; //不允许创建新选框
opt.allowMove = true; //允许拖动选框
opt.boxWidth = 1100; //画布宽度
opt.boxHeight = 500; //画布高度
opt.aspectRatio = 6.25; //图片的横纵比
api = $.Jcrop("#jcrop", opt); //创建插件
api.setImage(/*图片路径*/path); //加载图片
api.setOptions({onSelect: getCoords}); //添加选项,onSelect是创建选框之后触发的事件
api.animateTo([0, 0, 1000, 160]); //选框生成动画
api.setSelect([0, 0, 1000, 160]); //生成选框
/*事件触发函数*/
function getCoords(obj) {
/*以下参数需要通过ajax传送至php后台*/
selectw = parseInt(obj.w); //选框宽度
selecth = parseInt(obj.h); //选框高度
selectx = parseInt(obj.x); //选框起点x坐标
selecty = parseInt(obj.y); //选框起点y坐标
}</span><span style="font-size:18px;font-family: KaiTi_GB2312;">
</span>
将上述获得的参数传至PHP后台,使用PHP自带函数进行处理:
<span style="font-family:Times New Roman;font-size:14px;">$type = exif_imagetype($path); //获得图片类型
switch ($type) {
case IMAGETYPE_GIF:
$im1 = imagecreatefromgif($path); //创建一个跟原图一样大小的图片
break;
case IMAGETYPE_JPEG:
$im1 = imagecreatefromjpeg($path); //创建一个跟原图一样大小的图片
break;
case IMAGETYPE_PNG:
$im1 = imagecreatefrompng($path); //创建一个跟原图一样大小的图片
break;
default :
exit();
break;
}
$new_img = imagecreatetruecolor($w, $h); //创建一个用户剪裁宽高的黑白图片
imagecopyresampled($new_img, $im1, 0, 0, $x, $y, $w, $h, $w, $h); //将原图拷贝到新创建剪裁区域的图片中
switch ($type) {
case IMAGETYPE_GIF:
imagegif($new_img, $newsrc); //按新路径保存图片
break;
case IMAGETYPE_JPEG:
imagejpeg($new_img, $newsrc, 100); //按新路径保存图片
break;
case IMAGETYPE_PNG:
imagepng($new_img, $newsrc, 9); //按新路径保存图片
break;
default:
exit();
break;
}</span>
这样图片就剪裁完成了。
剪裁前的效果:
剪裁后的效果: