摘要：前面曾经写过一篇《H5图片裁剪升级版》，但里面需要借助第三方手势库，这次就不需要使用手势库，全部封装在代码中。 下图是裁剪的展示，下面就做了拖放和裁剪，没有做缩放，在插件中需要用到大量的计算。veImage的源码可以在此处浏览。 一、原理 1）拖动、缩放、裁剪都是借助Canvas实现的。Canvas 阅读全文

摘要：以前曾用Canvas合成、裁剪、图片等《用H5中的Canvas等技术制作海报》。这次用Canvas来画文字。 下图中“老王考到驾照后”这几个字是画在Canvas上的，与在PS中打入的字非常接近，毫无违和感。 前面一段时间也在研读JavaScript设计模式相关的知识，这次正好小小的实践一下，但对设计 阅读全文

摘要：前段时间做了个跟裁剪相关的活动《用H5中的Canvas等技术制作海报》，这次公司要做个与奥运相关的活动，扫车牌赢奖。 于是我就在上一个活动的基础上，将代码重新封装一下，并且将计算方式写的更通用。下图是活动中裁剪的页面： 先来看看两个活动的不同： 1、原先的活动每次旋转只能90°，而此次活动可以任意角 阅读全文

摘要：在去年的时候也实现过合成海报的功能，不过当时时间仓促，实现的比较简单。 就一个旋转功能，图片也不能拖动放大，也不能裁剪。 去年的实现可以参考《移动图片操作--上传》和《移动图片操作--预览旋转合成》 这次有时间就实现一个功能稍微多点的海报。 一、概要 第一屏 总共有三屏，第一屏是选择图片，第二屏是合 阅读全文

摘要：<canvas> 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。 兼容性方面，除了一些骨灰级浏览器IE6、IE7、IE8等，大部分现代浏览器都能支持。 一、属性与方法 1）属性 <canvas> 看起来和 <img> 元素 阅读全文

摘要：在上一节中已经提到了预览，预览可以通过data: URL格式或URL对象。 一切都很顺利，但其实有很多的坑，需要慢慢讲来。先从前面做的一个小功能说起。 这个小功能就是将两张图片合成起来，组成一张新的图片。 一、技术实现 1）上传的控件就用“input[type=file]”实现 Android的we 阅读全文