Skip to content

qizexi/mkgo-crop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

移动web图像裁剪插件

主程序名: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

About

web移动端图像裁剪程序

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published