最近社区系统需要支持移动端，其中涉及到用户头像上传，头像有大中小三种尺寸，在PC端，社区用Flash来处理头像编辑和生成，但该Flash控件的界面不友好而且移动端对Flash的支持不好，考虑到这些问题，最后我们选用Canvas来完成图像尺寸缩放和图片数据获取。

等边处理

头像一般都是正方形，首先我们需要获取图片宽度和高度的最小值，用该最小值作为边长居中裁剪图片，最终得到一个正方形的图片：

Canvas元素大小限制问题

上述clipSquareImage函数中，由于canvas.toDataURL接口不提供宽高参数，只能够一次性把整个canvas的屏幕数据截取下来，所以在对Canvas截屏前，我们必须先设置Canvas元素的大小。然而移动端拍照的分辨率极高，宽高大多会在3000以上，当我们根据相片宽高的最小值来设置Canvas的尺寸时，Canvas元素的最小宽度也高达到3000以上。

问题在于，每个平台对Canvas的大小都有限制，如果Canvas的宽度或高度任意一个值超过了平台限制，Canvas将无法进行渲染，canvas.toDataURL只能获取一张透明的图片数据。

Maximum size of a canvas element中提到了部分平台下Canvas的尺寸限制：

参考以上数据，我们先给Canvas设置一个最大的宽度：

var MAX_WIDTH = 1000;

在clipSquareImage函数中加入最大宽度的检测，如果超过限制，则创建一个临时的canvas进行图片缩放处理，最后对该临时的Canvas进行居中剪切：

Canvas锯齿问题

上面我们已经能够通过Canvas裁剪出一张正方形的图片，接下来我们还需要处理头像图片大中小三种尺寸。在Canvas中，drawImage接口提供非常方便的缩放功能：

然而大尺寸图片直接用drawImage进行缩小处理会导致图片出现锯齿。在stack overflow上HTML5 canvas drawImage: how to apply antialiasing提出了一个方案：对图片进行若干次的等比例缩小，最后再放大到目标尺寸：

参考这个方案，我们可以实现antialiasScale抗锯齿缩放函数：

我们可以用这个函数代替drawImage完成缩放工作，生成头像图片的三种尺寸：

PHP存储base64图片数据

Canvas.toDataURL()获取的默认图像数据格式是：data:image/png;base64,+ base64数据：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAADElEQVQImWNgoBMAAABpAAFEI8ARAAAAAElFTkSuQmCC

当把Canvas截屏数据传给后台时，后台需要截断开头的字段data:image/png;base64,，获取后面那串真正的base64数据：

参考