jQuery croppic图像裁剪插件

jQuery croppic图像裁剪插件
 点击预览  点击下载

croppic图像裁剪将满足您的需求,图像加载效果、展现效果以及裁剪都非常棒,相信您看Demo后一定会喜欢上此插件.

最简单的实现。请注意您必须提供该容器的宽度和高度。

JS

  1. var cropperHeader = new Crop('yourId'); 

HTML

  1. <div id="yourId"></div> 

CSS

  1. #cropContainerHeader { 
  2.     width200px
  3.     height150px
  4.     position:relative/* or fixed or absolute */ 

上载 URL

您的 img 上载处理文件的路径。

JS

  1. var cropperHeader = new Crop('yourId' cropperOptions); 
  2.     var cropperOptions = { 
  3.         uploadUrl:'path_to_your_image_proccessing_file.php' 

您将收到通过 AJAX POST 方法的图像文件作为多部分/格式数据 ;

(请注意 ajax 仅限于同一域请求)

后保存的图像成功,你必须返回以下 json。

  1.     "status":"success" 
  2.     "url":"path/img.jpg" 
  3.     "width":originalImgWidth 
  4.     "height":originalImgHeight 

(图像宽度和高度所需的限制最大缩放级别,所以图像不模糊。

错误响应的情况下

  1.     "status":"error" 
  2.     "message":"your error message text" 

上传数据

您想要发送给您的图像上传处理文件的附加数据

JS

  1. var cropperHeader = new Crop('yourId' cropperOptions); 
  2. var cropperOptions = { 
  3.     uploadUrl: 'path_to_your_image_proccessing_file.php' 
  4.     uploadData: { 
  5.         "dummyData": 1 
  6.         "dummyData2""text" 
  7.     } 

还有很多操作详情请查看官方文档。

转载请注明:代码家园 » jQuery croppic图像裁剪插件

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)