web更换头像的代码怎么编写要求点击头像即可更换而且可以自己剪切图片而且更换后头像的显示大小为160*160

实现更换头像的功能需要用到以下几个步骤：

1. 创建一个上传头像的表单。

2. 在后台接收表单数据，将上传的图片保存到服务器。

3. 将保存的图片路径存储到数据库中。

4. 在前端页面中显示用户头像。

5. 添加更换头像的功能，即点击头像弹出一个对话框，可以选择上传新的头像并裁剪。

下面是一个简单的实现方法：

1. 在 HTML 中创建一个上传头像的表单和一个用于显示头像的 img 标签。

<form enctype="multipart/form-data" method="post" id="avatar-form">
  <input type="file" name="avatar" id="avatar-input">
  <input type="submit" value="上传头像">
</form>

<img src="user_avatar.png" id="avatar-image">

2. 在后台接收表单数据，将上传的图片保存到服务器。

if(isset($_FILES['avatar'])) {
  $file = $_FILES['avatar'];
  $filename = $file['name'];
  $tmpname = $file['tmp_name'];
  $newname = uniqid().'_'.$filename;
  move_uploaded_file($tmpname, 'uploads/'.$newname);
  // 将新头像路径存储到数据库中
  $sql = "UPDATE users SET avatar='uploads/$newname' WHERE id=$user_id";
  // 执行 SQL 语句
}

3. 在前端页面中显示用户头像。

<img src="<?php echo $user['avatar'];?>" id="avatar-image">

4. 添加更换头像的功能，即点击头像弹出一个对话框，可以选择上传新的头像并裁剪。

// 引入 jQuery 和 cropper.js
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></script>

// 点击头像弹出对话框
$('#avatar-image').on('click', function() {
  $('#avatar-input').click();
});

// 选择图片后裁剪
$('#avatar-input').on('change', function() {
  var reader = new FileReader();
  reader.onload = function(e) {
    var img = $('<img>').attr('src', e.target.result);
    $('#avatar-preview').html(img);
    img.cropper({
      aspectRatio: 1,
      crop: function(e) {
        $('#avatar-x').val(e.x);
        $('#avatar-y').val(e.y);
        $('#avatar-w').val(e.width);
        $('#avatar-h').val(e.height);
      }
    });
  }
  reader.readAsDataURL(this.files[0]);
});

// 提交裁剪后的图片
$('#avatar-form').on('submit', function(e) {
  e.preventDefault();
  var img = $('#avatar-preview img');
  var canvas = img.cropper('getCroppedCanvas', {
    width: 160,
    height: 160
  });
  canvas.toBlob(function(blob) {
    var formData = new FormData($('#avatar-form')[0]);
    formData.append('avatar', blob);
    $.ajax({
      url: 'upload.php',
      type: 'POST',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data) {
        $('#avatar-image').attr('src', 'uploads/'+data);
        $('#avatar-modal').modal('hide');
      }
    });
  }, 'image/png');
});

在上面的代码中，我们使用了 cropper.js 库来实现图片的裁剪。当用户选择了新的头像后，我们将其显示在一个预览框中，并使用 cropper.js 对其进行裁剪。裁剪完成后，我们将裁剪后的图片转换成 Blob 对象，并将其添加到表单数据中。然后使用 jQuery.ajax() 函数将表单数据发送到后台进行处理。处理完成后，更新页面中的头像显示，并隐藏选择头像的对话框。