PhotoCrop

功能描述

本模块是一个图像剪裁插件,可用于对图片进行旋转缩放剪裁功能,可自定义图片大小。

快速使用

1.引入JS文件

  1. <script type="text/javascript" src="script/hammer.js" ></script>
  2. <script type="text/javascript" src="script/bundle.js" ></script>
  3. <script type="text/javascript" src="script/scrollzoom.js" ></script>
  4. <script type="text/javascript" src="script/photocrop.js" ></script>

2.初始化插件

示例代码

  1.     //初始化插件
  2.     var clipArea = new PhotoClip("#clipArea", {
  3.                 size : [300, 300], //裁剪框的大小
  4.                 outputSize : [0, 0], //打开图片大小，[0,0]表示原图大小
  5.                 file : "#file",//文件ID
  6.                 ok : "#clipBtn",//点击完成剪裁ID
  7.                 loadStart : function() {//图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
  8.                     $api.removeCls($api.dom(".loading"), "displaynone");
  9.                 },
  10.                 loadComplete : function() {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
  11.                     $api.addCls($api.dom(".loading"), "displaynone");
  12.                 },
  13.                 done : function(dataURL) {//裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。
  14.                     console.log(dataURL);
  15.                     $api.css($api.dom("#headimg"), "background-image:url(" + dataURL + ")");
  16.                     //dataURL裁剪后图片地址base64格式提交给后台处理,可通过ajax上传到服务器保存
  17.                     $(".clipbg").fadeOut();
  18.                 }
  19.             });

特别说明

,示例只提供了部分代码,详细用法见index.html