通过ajax将前端裁剪的图像上传到wordpress

Question

我正在构建一个页面，用户将在其中编辑他们的个人资料。在更改他们的个人资料图片时，他们应该能够裁剪新选择的图像。对于裁剪，我使用 cropzee 。经过研究，我发现没有 ajax 无法提交裁剪图像，因为无法通过 javascript 代码将裁剪图像添加到<input type = 'file' >。唯一的方法是可以将裁剪的图像数据作为 blob 或 data-url 形式发送到后端。
我的问题是：
1) 我该如何处理这些数据以上传到wordpress媒体？
2) 我有另一种不使用 blob 或 data-url 的方法吗？
3) 可以使用 wordpres 媒体上传器吗？怎么样？

Answer 1

查看cropzee documentation 要知道如何设置此插件，请按照以下说明进行操作。

1. 将返回类型设置为data-url

jQuery("#cropzee-input").cropzee({
      returnImageMode: 'data-url',

    });

1. 通过ajax发送图片数据到后端

ajaxRequ.send(cropzeeGetImage('cropzee-input'));

[假设你知道'ajax with wordpress'，如果不先谷歌然后回到这里]

1. 将 data-url 转换为图像并将其保存在自定义文件夹中。

<?php
function base64_to_jpeg($base64_string) {
    // open the output file for writing
$token = rand();
global $current_user;
  wp_get_current_user() ;
  //create a directory
mkdir(get_template_directory().'/temp');
//give a unique name to the image you may use username
$temp_path = get_template_directory().'/temp/profile_pic_'.$current_user->user_login.'.jpg';

// open the file to write the image data
    $ifp = fopen($temp_path,'w' ) or die(); 

    // split the string on commas
    // $data[ 0 ] == "data:image/png;base64"
    // $data[ 1 ] == <actual base64 string>
    $data = explode( ',', $base64_string );

    // write image data
    fwrite( $ifp, base64_decode( $data[ 1 ] ) );

    // clean up the file resource
    fclose( $ifp ); 
    
exit();
    
}
add_action("wp_ajax_temp_profile_pic","temp_profile_pic");
function temp_profile_pic(){
  
  $bsestring = file_get_contents("php://input");
  base64_to_jpeg($bsestring);



  wp_die();
}

1. 最后附上wordpress附件

 // to use media_handle_sideload() include the following
  require_once(ABSPATH . 'wp-admin/includes/image.php');
  require_once(ABSPATH . 'wp-admin/includes/file.php');
  require_once(ABSPATH . 'wp-admin/includes/media.php');
  
  $temp_path = get_template_directory().'/temp/profile_pic_'.$current_user->user_login.'.jpg';
//check if file exists
  if (file_exists($temp_path)) {
// check whether it is real image or not
    if (getimagesize($temp_path)) {
      $final_path = wp_upload_dir()['path'].'/'.pathinfo($temp_path, PATHINFO_BASENAME);
      //create file array
      $tmp = download_url(get_template_directory_uri().'/temp/profile_pic_'.$current_user->user_login.'.jpg');
      $file_array = array(
        'name' => basename(get_template_directory_uri().'/temp/profile_pic_'.$current_user->user_login.'.jpg'),
        'tmp_name' => $tmp
      );
   
    
//upload it to wp media upload directory
      $upload = media_handle_sideload($file_array, 0);
   
      if (empty($upload)) {
        echo "Successfully Uploaded"
      } elseif (!empty($upload)) {
        echo "Upload Failed!"
}
      

        
      }
//delete existing photo
      @unlink($tmp);
    }
  }
}


?>

您可以检查各种条件以使操作更精确。当然不用ajax也可以操作。只需将数据 url 放入 html textarea 元素并提交然后处理它。