写在最前：
前两天老大跟我说老虎官网上那个自定义头像的功能是flash实现的，没有安装过的还得手动去“允许”falsh的运行。所以让我用canvas实现一个一样的功能，嘿嘿，刚好最近也在研究canvas，所以欣然答应（其实，你没研究过难道就不答应么，哈哈哈哈哈~）
成果展示：
Git地址:https://github.com/ry928330/portraitDIY
功能说明：
拖拽左侧小方框，或者是鼠标放在小方框右下角，点击拉伸方框，方框覆盖部分的图片被自动截取下来，然后再在右侧的多个容器里面重绘。
输入宽高，自定义你需要订制的头像大小，目前只支持宽高相同的头像图片。
实现细节：
因为你要对图片所在的区域进行截图，所以你得制作一张canvas，盖在图片所在的区域。这里，我们给出了一个函数，根据传入的DOM里面元素的类名创建相同位置的canvas，盖在原来的DOM元素上面：
function createCanvasByClassName(tag) {
var canvasInitialWidth = $('.' + tag).width();
var canvasInitialHeight = $('.' + tag).height();
var left = $('.' + tag).offset().left - $('.' + tag).parent('.portraitContainer').offset().left + 1;
var top = $('.' + tag).offset().top - $('.' + tag).parent('.portraitContainer').offset().top + 1;
//var left = $('.' + tag).offset().left + 1;
//var top = $('.' + tag).offset().top + 1;
clearCanvasObj.left = $('.' + tag).offset().left + 1;
clearCanvasObj.top = $('.' + tag).offset().top + 1;
// clearCanvasObj.left = left;
// clearCanvasObj.top = top;
var canvasElement = $('<canvas></canvas>');
var randomNum = Math.floor(getRandom(0, 10000));
clearCanvasObj.canvasId = randomNum;
canvasElement.attr({
id: 'canvas',
width: canvasInitialWidth,
height: canvasInitialHeight
});
canvasElement.css({
position: 'absolute',
top: top,
left: left
});
//$('body').append(canvasElement);
var appendEle = $('.portraitContainer').append(canvasElement);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
//ctx.fillStyle = "rgba(211,211,216,0.5)";
ctx.clearRect(0, 0, canvasInitialWidth, canvasInitialHeight);
ctx.fillStyle = "rgba(0,0,0, 0.4)";
ctx.fillRect(0, 0, canvasInitialWidth, canvasInitialHeight);
return canvas;
}
有了这张canvas你就可以在你图片所在区域肆意的操作了。首先，降整个区域画上一个浅黑色的阴影，然后再擦除初始小方框区域里面的颜色。然后给整个页面添加mousedown，mousemove，mouseup事件，他们所做的功能就跟你在页面中实现一个拖拽的功能类似，这里重点说下mousemove里面做的操作，代码如下：
