web更换头像的代码怎么编写要求点击头像即可更换并且上传后的照片大小控制在160*160

这里提供一个基本的头像上传和更换的思路，具体实现可能需要根据你的具体需求进行调整。

HTML部分：

<input type="file" id="avatar-input" accept="image/*" onchange="uploadAvatar(this)">
<div id="avatar-preview">
  <img src="default-avatar.jpg" alt="Avatar Preview">
</div>

其中，`<input>` 元素用于选择本地的图片文件，并触发 `uploadAvatar()` 函数；`<div>` 元素用于预览已经上传的头像图片。

JavaScript部分：

function uploadAvatar(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var img = new Image();
      img.onload = function() {
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var width = img.width;
        var height = img.height;
        var max_size = 160; // 设置最大尺寸为160x160
        if (width > height) {
          if (width > max_size) {
            height *= max_size / width;
            width = max_size;
          }
        } else {
          if (height > max_size) {
            width *= max_size / height;
            height = max_size;
          }
        }
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(img, 0, 0, width, height);
        var dataURL = canvas.toDataURL(input.files[0].type);
        document.getElementById('avatar-preview').innerHTML = '<img src="' + dataURL + '" alt="Avatar Preview">';
      }
      img.src = e.target.result;
    }
    reader.readAsDataURL(input.files[0]);
  }
}

具体实现思路如下：

1. 判断用户是否选择了图片文件；
2. 读取文件内容，使用 `FileReader` 对象；
3. 在图片加载完成后，创建一个新的 `canvas` 元素，用于调整图片尺寸；
4. 根据图片的宽高比例和最大尺寸，计算出新的宽度和高度；
5. 使用 `drawImage()` 方法将原始图片绘制到 `canvas` 上，并调整大小；
6. 将调整后的图片转换为 base64 编码的字符串，用于预览；
7. 将预览图片显示在 `<div>` 元素中。

注意事项：

1. 需要在服务器上运行才能上传成功；
2. 上传的图片大小可能会超过最大值，需要在服务器端进行处理；
3. 该代码只提供了前端的基本实现，后端的处理需要根据你的具体需求进行编写。