Skip to content

一个基于jQuery和Jcrop的本地图片裁剪插件。

Notifications You must be signed in to change notification settings

GeekPark/h5Crop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

HTML5本地裁剪插件

一个基于jQueryJcrop的本地图片裁剪插件。

####License: MIT

###为什么需要这玩意 目前很多的图片上传、裁剪都是基于服务器端的。比如Jcrop,在选择好图片后仅仅是做了一个裁剪的UI,然后发给后端起始位置、大小等参数,由后端来裁剪。不喜欢后端方案,前端上HTML5中的Canvas又赋予了裁剪图片并输出为Base64格式的能力,自然这个插件就诞生了。

###如何使用 由于插件依赖jQueryJcrop,请保证在使用前先引入前两者。 ####HTML

<input type="file" id="imageupload">

####Javascript

  $('#imageupload').h5Crop({
    cropW: 120, // 裁剪区域宽
    cropH: 150, // 裁剪区域高
    previewW: 400, // 预览宽度(高度自适应)
    previewClass: 'upload-preview' // 预览样式类
  });

###浏览器兼容性

  • IE 10+
  • Firefox 3.6+
  • Chrome 7+
  • Safari 6+

###TODO:

  • 增加数据导出,目前的图片数据还没放到input里
  • 增加提交按钮

About

一个基于jQuery和Jcrop的本地图片裁剪插件。

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages