了解了drawImage方法后我们来看下，如何通过drawImage达到切图效果,其实这里的切图，只是通过drawImage加上高宽和偏移量来实现所谓的切图效果，代码如下：

//绘制图片function scaleCanvas (canvas, width, height, destX, destY){     var w = canvas.width,h = canvas.height;var cutCanvas = document.createElement('canvas');     var cutCtx = cutCanvas.getContext('2d');     cutCanvas.width = width;cutCanvas.height = height;cutCtx.drawImage(canvas, 0, 0, w, h, destX, destY, w, h);     return cutCanvas; } //获取图片URLfunction getDataURL (canvas, width, height, destX, destY) {     canvas = scaleCanvas(canvas, width, height, destX, destY);     return canvas.toDataURL('image/jpeg'); } //将conver转成IMG格式var convertToImage = function (canvas, width, height, destX, destY) {     var strData = getDataURL(canvas, width, height, destX, destY);     return encodeURIComponent(strData); }

这里先说下大致实现的原理，首先先创建一个新的canvas然后设置好宽高，而这个宽高就是参考线分隔的每一块宽高，然后过通drawImage将原图上某块局域复制一份出来，再通过toDataURL转成base64编码方便本地显示。
所在在这个Demo中image就是我们刚上传的那个图片,sourceX、sourceY和destWidth、destHeight取图片的原始高宽，而我们要复制的局域也是从新的canvas上的左上角开始，所以这里的sourceX、sourceY为0，0。这里最主要的就是destX、destY，就是他们来控制复制局域的起始坐标，因为新图片是需要从最左边开始复制，所以destX为0，而destY将根据参考线的纵坐标来定值。

这里要注意一下，因为域的问题，所以如果页面不是放到服务器上运行而是本地运行的话会出现权限报错情况

最后附上Demo一枚，欢迎大家尽情的暴、使劲暴。(Demo只支持chrome浏览器，其他浏览器会有不良反应，请见谅)

好了，整个HTML5自助化切图的主要代码就这些，这里第一次尝试用HTML5去做一些实实在在的东西，可能代码并不是最优，还能继续优化，大家如果对于文章有什么建议或不明白的地方欢迎讨论。

在旧版的切图工具里，我们的做法是将图片上传到服务器，然后通过服务器端把图片切好后把对应的地址返回，前端再把页面显示出来。这样的做法会导致在网络慢时出现长时间的等待，而如果页面放弃这里的操作，还需要将图片从服务器端删除掉。在拖拽参考线时也只能通过大量的代码去实现，还需要编写一些服务器端代码。

HTML5版相对有响应速度快（本地读取）、拖拽功能简单、前端切图不需要依赖服务器，减少开发成本。

反正HTML5是个上流、好玩、有趣、简单的好东西，值得你一生拥有。

写完文章已经凌晨两点半，根据官方和非官方统计，这个时间段被坑机率是平时的0.000001%，实践是检验真理的唯一标准。而为了检验这个标准我带着疲惫的身躯，打开客户端进入匹配模式。
裸多兰一级升E下路孤独神级大嘴再次上路，德玛西亚。。。