HTML5版相对有响应速度快(本地读取)、拖拽功能简单、前端切图不需要依赖服务器，减少开发成本。
在旧版的切图工具里，我们的做法是将图片上传到服务器，然后通过服务器端把图片切好后把对应的地址返回，前端再把页面显示出来。
这样的做法会导致在网络慢时出现长时间的等待，而如果页面放弃这里的操作，还需要将图片从服务器端删除掉。在拖拽参考线时也只能通过大量的代码去实现，还需要编写一些服务器端代码。
因为 img、input 都是自闭合标签，所以，无法简单的让 input 固定在 img 上 。
要想 input 把固定在 img 上，要运用点小技巧，借助一个 div 作为容器，然后，图片没有特殊要求不用动，input 做绝对定位 。
html：
<div class="box"><img src="test.jpg" />
<input type="text" />
</div>
CSS：
.box { position:relative }.box input { position:absolute left:0px top:0px }
说明：因为 img 没有定位，所以，它会自动填充 div，你要做的就是 调整 input 的 left、top 进行定位就行了 。
.
