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

一步步解决:
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了。

http://cssor.com/mobile-image-rotate-zoom-drag-and-canvas-splice-images-to-upload.html

参与评论

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

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(48)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(53)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(32)移动开发(4)自然(22)