2 Star 2 Fork 1

齐泽西 / mkgo-crop

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
README.md 2.01 KB
一键复制 编辑 原始数据 按行查看 历史
ausu-qizexi 提交于 2016-05-29 12:25 . 新增示例

主程序名:mkgo-crop.js
主程序说明:马可波罗旅行html5移动端图片裁剪程序
作者:qizexi
邮箱:qizexi@163.com
公司:马可波罗旅行
网址:www.mkgo.cn(未上线)
微信服务号:mkgo-cn

暂时就叫它裁剪程序吧,说框架似乎有点粗糙。
裁剪程序的由来:项目需要用到裁剪技术,对用户的图像进行裁剪,
但是尝试了网上的一些图片裁剪的程序都不是很理想,
要么存在安卓和ios系统的兼容问题,要么就是有些手机上面存在压扁的情况,
所以最后决定使用html5+canvas来开发,目前版本的代码比较粗糙,
但是裁剪方面是比较完美的。
目前只是做了移动端的移动,缩放,就是对触摸事件的监听,电脑端没有实现,
感兴趣的朋友可以对程序加以扩展,欢迎一起学习交流。

使用方式:
var mkCrop = {
//图片地址
'imgsrc': imgsrc,
//图片裁剪确定成功后回调函数
'back_fnc': back_fnc,
//裁剪左旋转按钮图片路径
'leftrimgurl': leftrimgurl,
//裁剪右旋转按钮图片路径
'rightrimgurl': rightrimgurl,
//裁剪完成确定按钮图片路径
'okrimgsrc': okrimgsrc,
//图片裁剪放置在那个dom节点对象里面
'cropparentdom': cropparentdom,
//图片预览dom节点对象
'preimgdom': preimgdom,
//图片裁剪数据信息收集的input对象
'cropinputdom': cropinputdom
} initMkgoCrop(mkCrop);

具体的使用请参考两个例子
index.html 裁剪图片来源是图片的url
index-2.html 裁剪的图片来源是拍照或者用户选择的相片信息

示例代码(上传代码已经被屏蔽:)):
http://wx1.mkgo.cn/mkgo-crop/index.html
http://wx1.mkgo.cn/mkgo-crop/index-2.html

这里输入代码
JavaScript
1
https://gitee.com/qizexi/mkgo-crop.git
git@gitee.com:qizexi/mkgo-crop.git
qizexi
mkgo-crop
mkgo-crop
master

搜索帮助