移动端图片缩放-旋转-拖拽并和背景图拼合

一步步解决:
1、支持触屏手势的js库,选择Hammer.js。另有一个Quo.js,估计是为了赚钱,文档差的一塌糊涂,试用过程也发现一些基本问题都不能从文档中找到解决方法,所以弃用。

实现旋转遇到的问题,参考了一些资料:
http://jsfiddle.net/8726R/
http://youryida.duapp.com/other/drag_rotate/

2、canvas的图片拼合,参考:
http://www.w3school.com.cn/tags/html_ref_canvas.asp
http://www.xinran001.com/bbs/thread-73899-1-1.html

3、上传canvas拼好的图片,参考:
http://cnodejs.org/topic/4f939c84407edba2143c12f7
http://my.oschina.net/hzplay/blog/160806
https://github.com/think2011/LocalResizeIMG
http://blog.csdn.net/northwind_x/article/details/5874680
http://blog.csdn.net/renfufei/article/details/9836317

思路就是 用canvasElement.toDataURL()获取base64编码的图像,去除开头的”data:image/png;base64,”数据声明,用xhr post给后端,后端对base64转码然后写入一个图片文件,基本就OK了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注