jquery 上传 头像处理

在网站的用户体验中，头像是不可或缺的一个元素之一。而如何上传与处理头像，便成了一个非常实用的功能。

为了方便地处理头像，我们可以使用jQuery插件上传头像，并使用Canvas来对头像进行剪裁和缩放。下面是一个简单的实现过程：

$(function() {
  $('input[type=file]').change(function() {
    var file = this.files[0];
    var reader = new FileReader();

    reader.onload = function() {
      var img = new Image();
      img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = 200;
        canvas.height = 200;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0, 200, 200);

        // 剪裁图片
        var imageData = ctx.getImageData(0, 0, 200, 200);
        for (var i = 0; i < imageData.data.length; i += 4) {
          if (imageData.data[i] >= 200 && imageData.data[i + 1] >= 200 && imageData.data[i + 2] >= 200) {
            imageData.data[i + 3] = 0;
          }
        }
        ctx.putImageData(imageData, 0, 0);

        // 显示图片
        $('img.avatar').attr('src', canvas.toDataURL());
      }
      img.src = reader.result;
    }
    reader.readAsDataURL(file);
  });
});

上述代码中，我们对`input[type=file]`的`change`事件进行监听，在选择头像后将头像转成数据URL，在加载到一个新的Image对象中。然后创建一个Canvas，并将Image的内容绘制到Canvas上面。接着，我们对Canvas进行裁剪，将不符合要求的背景色变成透明。最后，我们将Canvas的内容转成数据URL，并将其作为头像显示在网站上。

通过这种方法，我们不仅可以上传并显示头像，还可以对头像进行处理，提高头像显示的质量。