在现在这个到处是HTML5话题的时代，好像不懂点HTML5都有点落伍。那我也跟上潮流一把吧，今天给大家分享的是基于HTML5的自助切图。

在组里经常会被某设计师叫切板仔，确实重构很大一部分工作都花在切图上，而如何提高切图效率或者让切图自助化也是我们重构师的追求。基于这个前提我自己抱着研究的心态，使用HTML5大致实现了一下。一开始觉得HTML5是个很神秘很高深的东西，其实当你去了解他，你会发现他是很空虚，且很容易上…………….手的。

这里使用到的HTML5技术包括：

拖拽：

拖拽基本事件如下：

DataTransfer 对象退拽对象用来传递的媒介，使用一般为Event.dataTransfer。

draggable 属性就是标签元素要设置draggable=true，否则不会有效果，例如： <div title=”拖拽我” draggable=”true”&rt;列表1</div:rt;</td&rt;

ondragstart 事件当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上

ondragenter 事件当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上

ondragover 事件拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上

ondrop 事件被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上

ondragend 事件当拖拽完成后触发的事件，此事件作用在被拖曳元素上

drageleave事件当拖拽离开此处时触发，只在离开这个对象时触发一次，此事件作用在目标元素上

Event.preventDefault() 方法阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。

Event.effectAllowed 属性就是拖拽的效果。

介绍完拖拽基本事件后，再来看下页面是如何通过拖拽将本地图片通过拖拽的方式拖到页面指定区域使用图片上传，这也是拖拽现在比较常用到的功能。

给document增加拖拽事件，当拖拽元素进入页面时改变目标元素样式提示用户目标元素位置，当拖拽元素离开页面后还原样式。代码如下：

document.ondragleave = function(e){e.preventDefault(); var el = document.getElementById('target_box'); el.className = el.className.replace(/over/g,'');} document.ondrop = function(e){e.preventDefault();} document.ondragenter = function(e){ e.preventDefault(); var el = document.getElementById('target_box'); el.className = el.className + ' over';}document.ondragover = function(e){e.preventDefault(); var el = document.getElementById('target_box'); el.className = el.className + ' over';}

当图片被拖到上传区域后通过FileReader方法读取本地文件，然后将图片通过canvas来绘制，如果图片的宽度是大于画布1000px将水平居中处理，这里因为切图的时候需要将图片完整切出来，所以在设置canvas宽度时需要显示成图片的大小，所以这里使用了负marginLeft（这里将图片宽度减1000得出超出1000的区域，然后再除于2得出marginLeft的值）外面套一层1000px的方式来实现水平居中。代码如下：

var box = document.getElementById('target_box'); box.ondrop = function(e){e.preventDefault();//获取文件列表 var fileList = e.dataTransfer.files; var reader = new FileReader(); reader.onload = function(e){ var img = new Image();img.src = this.result;img.onload = function(){  if(this.width&gt;1000){canvas.style.marginLeft = ((this.width - 1000)/2) * -1 + 'px';  }canvas.width = this.width;canvas.height = this.height;ctx.drawImage(this,0,0);}  }reader.readAsDataURL(fileList[0]);  document.getElementById('target_box').style.display = 'none';  document.getElementById('doc').style.display = 'display'; };本地预览（FileReader）

FileReader接口的方法

readAsBinaryString(file)将文件读取二进制码
通常我们将它传送到后端，后端可以通过这段字符串存储文件

readAsText(file,[encoding])将文件读取文本
第二个参数是文本的编码方式，默认UTF-8

readAsDataURL(file)将文件读取为DataURL
将文件读取为一串Data URL字符串，将小文件以一种特殊格式的URL地址直接读入页面。小文件指图像与html等格式的文件。

FileReader接口的事件

onabort数据读取中断时触发

onerror数据读取出错时触发

onloadstart数据读取开始时触发

onprocess数据读取中

onload数据读取成功完成时触发

onloadend数据读取完成时触发，无论成功失败

这里因为标尺不需要做任何事情处理只需要拖拽效果，所以只需要增加draggable属性就可以。
然后给目标元素增加Drop事件，当拖拽的标尺在目标元素上放开时新建一个参考线并通过offsetY来获取鼠标释放时的Y坐标，然后再将这个Y坐标存到数组里。

//增加标尺目标事件document.getElementById('cvs').ondrop = function(ev){     var div = document.createElement('div');         div.style.width = '100%'div.style.height = '1px';div.style.background = '#4affff';         div.style.position = 'absolute'div.style.top = ev.offsetY + 18 + 'px';document.getElementById('screen').appendChild(div);         rulerTop.push(ev.offsetY);         return false; }Canvas：

这里先介绍下canvas的drawImage方法，切图的核心方法就是这个，我们先来看看官方给出的使用方法与解释：

drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)

image所要绘制的图像。这必须是表示

标记或者屏幕外图像的 Image 对象，或者是 Canvas 元素。

sourceX, sourceY图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。

sourceWidth, sourceHeight图像所要绘制区域的大小，用图像像素表示。

destX, destY所要绘制的图像区域的左上角的画布坐标。

destWidth, destHeight图像区域所要绘制的画布大小。