享受生活,热爱重构,大家好,我是Json。
在现在这个到处是HTML5话题的时代,好像不懂点HTML5都有点落伍。那我也跟上潮流一把吧,今天给大家分享的是基于HTML5的自助切图。
在组里经常会被某设计师叫切板仔,确实重构很大一部分工作都花在切图上,而如何提高切图效率或者让切图自助化也是我们重构师的追求。基于这个前提我自己抱着研究的心态,使用HTML5大致实现了一下。一开始觉得HTML5是个很神秘很高深的东西,其实当你去了解他,你会发现他是很空虚,且很容易上…………….手的。
这里使用到的HTML5技术包括:
- 本地预览(FileReader)
- 拖拽(drag & drop)
- 切图(canvas)
拖拽:
拖拽基本事件如下: