利用Jcrop完成截图保存功能

首先到官网(deepliquid.com/content/Jcrop.html)下载Jcrop插件接下来就是吧你所下载的包解压并放在你的项目里.然后就是各种的配置了,根据你的项目需求,比选择框默认大小之类的.另外在jQuery_jcrop.js问价的最下端有一段初始化的代码,根据需求更改初始化

$.Jcrop.defaults = {
    // Basic Settings
    allowSelect: false,           //是否可以选择true/false
    allowMove: true,
    allowResize: false,      //是否可以改变选择框大小,true/false
    trackDocument: true
    // Styling Options
    baseClass: 'jcrop',
    addClass: null,
    bgColor: 'black',
    bgOpacity: 0.6,
    bgFade: false,
    borderOpacity: 0.4,
    handleOpacity: 0.5,
    handleSize: null,
    setSelect: [0,0,200,200],       //选择框的初始大小[x1,y1,x2,y2]
    aspectRatio: 0,
    keySupport: true,
    createHandles: ['n','s','e','w','nw','ne','se','sw'],
    createDragbars: ['n','s','e','w'],
    createBorders: ['n','s','e','w'],
    drawBorders: true,
    dragEdges: true,
    fixedSupport: true,
    touchSupport: null,
    shade: null,
    boxWidth: 0,
    boxHeight: 0,
    boundary: 2,
    fadeTime: 400,
    animationDelay: 20,
    swingSpeed: 3,
    minSelect: [0, 0],
    maxSize: [0, 0],
    minSize: [0, 0],
    // Callbacks / Event Handlers
    onChange: function () {},
    onSelect: function () {},
    onDblClick: function () {},
    onRelease: function () {}
  };

另外这些参数也会用到很多

var api = {
      setImage: setImage,
      animateTo: animateTo,
      setSelect: [40,40,240,240],
      setOptions: setOptionsNew,
      tellSelect: tellSelect,
      tellScaled: tellScaled,
      setClass: setClass,


      disable: disableCrop,
      enable: enableCrop,
      cancel: cancelCrop,
      release: Selection.release,
      destroy: destroy,


      focus: KeyManager.watchKeys,


      getBounds: function () {
        return [boundx * xscale, boundy * yscale];
      },
      getWidgetSize: function () {
        return [boundx, boundy];
      },
      getScaleFactor: function () {
        return [xscale, yscale];
      },
      getOptions: function() {
        // careful: internal values are returned
        return options;
      },


      ui: {
        holder: $div,
        selection: $sel
      }
    };

主要就是这些,另外在官网有它的英文API,

(http://www.jb51.net/article/39806.htm)坑啊,之前没找到这个,基本都是自己试出来的,废了好大劲,现在存下来,以后或许用得到.

还有截取的图片地址是写死的,我是先把图片传到服务器然后把地址传回来再显示\截取,好像对服务器压力有影响,望大神赐教