WordPress 使用 Jcorp上传并裁剪图片作为自定义头像 —— PHP 后台部分

开发WordPress用户中心上传并裁剪头像功能

我是一名有着几年WordPress开发经验的程序员，最近在开发一个WordPress用户中心的功能，其中需要实现用户上传并裁剪自定义头像的功能。由于很多用户不太会裁剪图片，所以我研究测试了很久，最终使用了jQueryAjaxUpload插件以及jQuery Jcorp插件，成功实现了用户可以在前端上传图片并进行裁剪的功能。以下是实现细节和代码示例。

上传并裁剪图片用到的功能函数

实现上传并裁剪图片功能，用到了以下几个WordPress提供的函数：

• update_user_meta：用来添加或更新用户自定义字段，主要用于添加用户上传的图片作为头像。
• wp_get_attachment_url：获取用户头像的src地址。
• wp_get_attachment_metadata：获取上传的图片的meta信息，方便进一步处理裁剪图片。
• wp_upload_dir：获取WordPress的上传目录，用于保存裁剪后的图片。
• wp_get_image_editor：获取图片编辑器，裁剪图片主要使用此功能。

保存使用Ajax方式上传的图片

使用了WordPress上传辅助类MediaUpload，通过新建一个MediaUpload实例，并把Ajax传过来的图片名称赋值给该实例，就可以把图片保存到数据库中，返回一个图片附件ID，作为用户自定义头像字段的值保存到数据库里面，实现保存使用Ajax方式上传的图片的功能。以下是相应代码示例。

//引入上传图片辅助类
include_once('MediaUpload.php');

/*Ajax上传图片*/
add_action('wp_ajax_upload','ajax_upload');
add_action('wp_ajax_nopriv_upload','ajax_upload');
function ajax_upload(){

	$current_user=wp_get_current_user();
	$uid=$current_user->ID;

	$tmp=new MediaUpload;

	if($_FILES){
		foreach($_FILES as $file=>$array){
			$newupload=$tmp->saveUpload($field_name=$file);
		}
	}

	update_user_meta($uid,'cus_avatar',$newupload['attachment_id']);

	$res=array(
		'id'=>$newupload['attachment_id'],
		'url'=>wp_get_attachment_url($newupload['attachment_id'])
	);

	echo json_encode($res);

	die();//停止执行
}

使用Jcorp裁剪原始图片并保存到WordPress上传目录

由于很多朋友遇到问题的是获取图片名称和上传目录的问题。以下代码是我测试过的，可以直接使用，通过该代码实现了使用Jcorp裁剪原始图片并将其保存到WordPress上传目录的功能。

/*Ajax上传图片*/
add_action('wp_ajax_subcorp','subcorp_img');
add_action('wp_ajax_nopriv_subcorp','subcorp_img');
function subcorp_img(){

	/*获取用户id*/
	$current_user=wp_get_current_user();
	$uid=$current_user->ID;

	/*获取上传的字段*/
	$src1=$_POST["goods_img"];
	$src_x=$_POST["x"];
	$src_y=$_POST["y"];
	$src_w=$_POST["w"];
	$src_h=$_POST["h"];

	/*获取上传目录名和文件名*/
	$wp_upload_dir=wp_upload_dir();
	$img_meta=wp_get_attachment_metadata($src1);
	$img_file=$wp_upload_dir['basedir'].'/'.$img_meta['file'];

	/*保存裁剪后的图片到上传目录*/
	$image=wp_get_image_editor($img_file);
	if(!is_wp_error($image)){
		$image->crop($src_x,$src_y,$src_w,$src_h,$dst_w=$src_w,$dst_h=$src_h,$src_abs=false);
		$new_name=$image->generate_filename();
		$image->save($new_name);
	}

	//获取图片扩展名
	$filetype=wp_check_filetype(basename($new_name),null);

	//准备插入附件
	$attachment=array(
		'guid'=>$wp_upload_dir['url'].'/'.basename($new_name),
		'post_mime_type'=>$filetype['type'],
		'post_title'=>preg_replace('/\.[^.]+$/','',basename($new_name)),
		'post_content'=>'',
		'post_status'=>'inherit'
	);

	//插入附件，并更新自定义头像字段
	$attach_id=wp_insert_attachment($attachment,$new_name);
	update_user_meta($uid,'cus_avatar',$attach_id);

	$corped_url=wp_get_attachment_url($attach_id);
	echo $corped_url;

	exit;
}

以上方法同样适用于前端上传文章缩略图或文章相册，只需要稍作修改即可。前端部分比较独立，本文不再赘述，有兴趣的朋友可以查阅相关jQuery插件文档。如有疑问或更好的方法，欢迎评论交流，对于完全不知道如何实现以上功能的朋友，也欢迎联系WordPress智库定制开发。

扫码添加UTHEME微信为好友

· 分享WordPress相关技术文章，主题上新与优惠动态早知道。
· 微信端最大WordPress社群，限时免费入群。