不看的会懊悔，HTML5自助切图
日期：2014-05-17 浏览次数：20894 次
不看的会后悔，HTML5自助切图
html5搜点击更精彩！
享受生活，热爱重构，大家好，我是Json。
在现在这个到处是HTML5话题的时代，好像不懂点HTML5都有点落伍。那我也跟上潮流一把吧，今天给大家分享的是基于HTML5的自助切图。
在组里经常会被某设计师叫切板仔，确实重构很大一部分工作都花在切图上，而如何提高切图效率或者让切图自助化也是我们重构师的追求。基于这个前提我自己抱着研究的心态，使用HTML5大致实现了一下。一开始觉得HTML5是个很神秘很高深的东西，其实当你去了解他，你会发现他是很空虚，且很容易上…………….手的。
这里使用到的HTML5技术包括：
- 本地预览（FileReader）
- 拖拽（drag & drop）
- 切图（canvas）
拖拽：
拖拽基本事件如下：
| 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 属性 | 就是拖拽的效果。 |
图1是页面上所使用到拖拽的地方。左图为拖拽上传图片，右图为拖拽参考线。
介绍完拖拽基本事件后，再来看下页面是如何通过拖拽将本地图片通过拖拽的方式拖到页面指定区域使用图片上传，这也是拖拽现在比较常用到的功能。
给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>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]);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
