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

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

前言:

在开发WordPress用户中心的时候,我们需要让用户在前段上传自定义图片作为头像,因为很多用户都是小白,上传头像之前要求他们按照尺寸裁剪好是不大现实的。为了提升用户体验,我研究测试了很久,终于搞定了让WordPress用户在前段上传图片并裁剪的功能。上传图片用了jQuery Ajax Upload插件,裁剪功能用了jQuery Jcorp,都是比较成熟,并且浏览器兼容性较好的jQuery插件。功能的使用效果如下图。

jcorp
WordPress 使用 jcorp 裁剪图片作为自定义头像

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

处理上传的图片用到了Github上找到的一个WordPress上传辅助类MediaUpload,其他的处理函数用到了WordPress为我们提供的以下几个函数:

  • update_user_meta:添加或更新用户自定义字段,主要用来添加上传的图片为用户头像
  • wp_get_attachment_url:获取用户头像的src地址
  • wp_get_attachment_metadata:获取上传的图片的meta信息,用来进一步处理裁剪图片
  • wp_upload_dir:获取WordPress的上传目录,保存裁剪后的图片的时候需要用到
  • wp_get_image_editor:获取图片编辑器,裁剪图片主要就是使用的这个功能

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

这一步使用了MediaUpload类,比较简单,只需要新建一个MediaUpload实例,然后把Ajax传过来的图片名称赋值给这个实例就可以了。保存后会返回一个图片附件ID,把这个ID作为用户自定义头像字段的值保存到数据库里面就可以了。

  1. // 引入上传图片辅助类
  2. include_once( ‘MediaUpload.php’ );
  3. /*Ajax上传图片*/
  4. add_action( ‘wp_ajax_upload’, ‘ajax_upload’ );
  5. add_action( ‘wp_ajax_nopriv_upload’, ‘ajax_upload’ );
  6. function ajax_upload() {
  7.     $current_user = wp_get_current_user();
  8.     $uid = $current_user->ID;
  9.     $tmp = new MediaUpload;
  10.     if ( $_FILES ) {
  11.         foreach ( $_FILES as $file => $array ) {
  12.             $newupload = $tmp->saveUpload( $field_name=$file );
  13.         }
  14.     }
  15.     update_user_meta($uid, ‘cus_avatar’, $newupload[‘attachment_id’]);
  16.     $res = array(
  17.         ‘id’ => $newupload[‘attachment_id’],
  18.         ‘url’ => wp_get_attachment_url($newupload[‘attachment_id’])
  19.     );
  20.     echo json_encode($res);
  21.     die(); //停止执行
  22. }

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

这一步的难点在于获取图片名称和上传目录,很多朋友可能会在这里遇到问题,我也是尝试了很久才测试成功的,下面的代码是我测试过的,可以直接拿去用。

  1. /*Ajax上传图片*/
  2. add_action( ‘wp_ajax_subcorp’, ‘subcorp_img’ );
  3. add_action( ‘wp_ajax_nopriv_subcorp’, ‘subcorp_img’ );
  4. function subcorp_img() {
  5.     /*获取用户id*/
  6.     $current_user = wp_get_current_user();
  7.     $uid = $current_user->ID;
  8.     /*获取上传的字段*/
  9.     $src1 = $_POST[“goods_img”];
  10.     $src_x = $_POST[“x”];
  11.     $src_y = $_POST[“y”];
  12.     $src_w = $_POST[“w”];
  13.     $src_h = $_POST[“h”];
  14.     /*获取上传目录名和文件名*/
  15.     $wp_upload_dir = wp_upload_dir();
  16.     $img_meta = wp_get_attachment_metadata($src1);
  17.     $img_file = $wp_upload_dir[‘basedir’] . ‘/’ . $img_meta[‘file’];
  18.     /*保存裁剪后的图片到上传目录*/
  19.     $image = wp_get_image_editor( $img_file );
  20.     if ( ! is_wp_error( $image ) ) {
  21.         $image->crop( $src_x$src_y$src_w$src_h$dst_w = $src_w$dst_h = $src_h$src_abs = false );
  22.         $new_name = $image->generate_filename();
  23.         $image->save($new_name);
  24.     }
  25.     // 获取图片扩展名
  26.     $filetype = wp_check_filetype( basename$new_name ), null );
  27.     // 准备插入附件
  28.     $attachment = array(
  29.         ‘guid’           => $wp_upload_dir[‘url’] . ‘/’ . basename$new_name ),
  30.         ‘post_mime_type’ => $filetype[‘type’],
  31.         ‘post_title’     => preg_replace( ‘/\.[^.]+$/’, basename$new_name ) ),
  32.         ‘post_content’   => ,
  33.         ‘post_status’    => ‘inherit’
  34.     );
  35.     // 插入附件,并更新自定义头像字段
  36.     $attach_id = wp_insert_attachment( $attachment$new_name );
  37.     update_user_meta($uid, ‘cus_avatar’, $attach_id);
  38.     $corped_url = wp_get_attachment_url($attach_id);
  39.     echo $corped_url;
  40.     exit;
  41. }

写在后面:

除了上传自定义头像,本文介绍的方法同样可以用在前端上传文章缩略图或文章相册上面,只需要稍作改动就可以了。因为前端部分基本上不涉及WordPress,在这里就不再做介绍了,有能力的朋友可以直接参照上面提到的两个jQuery插件的文档使用。

本文参考于 https://www.wpzhiku.com/user-jcorp-upload-and-corp-images-in-wordpress/  ,若有任何来源问题,请联系QQ:1516677079 及时更正。

最有意思的设计站点


最好的UI素材库

我们极力推荐: