时间: 2021-07-30 10:45:40 人气: 9 评论: 0
享受生活，热爱重构，大家好，我是Json。
在现在这个到处是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>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接口的方法 | |
|---|---|
| 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;
}drawImage(image, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight)
| image | 所要绘制的图像。这必须是表示 |
| sourceX, sourceY | 图像将要被绘制的区域的左上角。这些整数参数用图像像素来度量。 |
| sourceWidth, sourceHeight | 图像所要绘制区域的大小，用图像像素表示。 |
| destX, destY | 所要绘制的图像区域的左上角的画布坐标。 |
| destWidth, destHeight | 图像区域所要绘制的画布大小。 |
了解了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;
}
//获取图**URL
function 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下路孤独神级大嘴再次上路，德玛西亚。。。
来源：**gdc
