HTML5自助切图

WBOY

リリース： 2016-05-17 09:08:52

オリジナル

2434 人が閲覧しました

享受生活，热爱重构，大家好，我是Json。

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

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

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

本地预览（FileReader）
拖拽（drag & drop）
切图（canvas）

拖拽：

拖拽基本事件如下：

DataTransfer 对象	退拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性	就是标签元素要设置draggable=true，否则不会有效果，例如：
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]);
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	图像区域所要绘制的画布大小。

了解了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是个上流、好玩、有趣、简单的好东西，值得你一生拥有。

原文：http://gdc.qq.com/?p=2800