HTML5实例教程:FileReader、拖拽和canvas（ 2 ）介绍：HTML5实例教程FileReader、拖拽和canvas,HTML5实例教程,HTML5自助切图 所属栏目为HTML教程
给目标元素增加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是个上流、好玩、有趣、简单的好东西，值得你一生拥有。

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

上一页  [1] [2] 

免责声明：本文内容及图片等均属网络转载，如侵即删。本文仅代表作者个人观点，与网页资源网无关。其原创性及文中陈述内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，仅作参考，请自行核实相关内容。