jQuery¼¼Êõ

jQuery Jcrop ͼÏñ²Ã¼ô

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2017-02-09 09:02 ÎÒÒªÆÀÂÛ( )

Jcrop ÊÇÒ»¸ö¹¦ÄÜÇ¿´óµÄ jQuery ͼÏñ²Ã¼ô²å¼þ£¬½áºÏºó¶Ë³ÌÐò£¨ÀýÈ磺PHP£©¿ÉÒÔ¿ìËÙµÄʵÏÖͼƬ²Ã¼ôµÄ¹¦ÄÜ¡£ °æ±¾£º jQuery v1.5.1+ jQuery Jcrop v0.9.12 github

jQuery Jcrop ͼÏñ²Ã¼ô

À´Ô´£ºCNBLOGS   ·¢²¼Ê±¼ä£º 2017-02-08   ×÷ÕߣºÍøÓÑ   ä¯ÀÀ´ÎÊý£º

          JQueryÊǼÌprototypeÖ®ºóÓÖÒ»¸öÓÅÐãµÄJavascript¿â¡£ËüÊÇÇáÁ¿¼¶µÄjs¿â £¬Ëü¼æÈÝCSS3£¬»¹¼æÈݸ÷ÖÖä¯ÀÀÆ÷£¨IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+£©£¬jQuery2.0¼°ºóÐø°æ±¾½«²»ÔÙÖ§³ÖIE6/7/8ä¯ÀÀÆ÷¡£jQueryʹÓû§Äܸü·½±ãµØ´¦ÀíHTML£¨±ê׼ͨÓñê¼ÇÓïÑÔϵÄÒ»¸öÓ¦Óã©¡¢events¡¢ÊµÏÖ¶¯»­Ð§¹û£¬²¢ÇÒ·½±ãµØΪÍøÕ¾ÌṩAJAX½»»¥¡£jQuery»¹ÓÐÒ»¸ö±È½Ï´óµÄÓÅÊÆÊÇ£¬ËüµÄÎĵµËµÃ÷ºÜÈ«£¬¶øÇÒ¸÷ÖÖÓ¦ÓÃҲ˵µÃºÜÏêϸ£¬Í¬Ê±»¹ÓÐÐí¶à³ÉÊìµÄ²å¼þ¿É¹©Ñ¡Ôñ¡£jQueryÄܹ»Ê¹Óû§µÄhtmlÒ³Ãæ±£³Ö´úÂëºÍhtmlÄÚÈÝ·ÖÀ룬Ҳ¾ÍÊÇ˵£¬²»ÓÃÔÙÔÚhtmlÀïÃæ²åÈëÒ»¶ÑjsÀ´µ÷ÓÃÃüÁîÁË£¬Ö»ÐèÒª¶¨Òåid¼´¿É¡£

 

ÕªÒª: Jcrop ÊÇÒ»¸ö¹¦ÄÜÇ¿´óµÄ jQuery ͼÏñ²Ã¼ô²å¼þ£¬½áºÏºó¶Ë³ÌÐò£¨ÀýÈ磺PHP£©¿ÉÒÔ¿ìËÙµÄʵÏÖͼƬ²Ã¼ôµÄ¹¦ÄÜ¡£ °æ±¾£º jQuery v1.5...

Jcrop ÊÇÒ»¸ö¹¦ÄÜÇ¿´óµÄ jQuery ͼÏñ²Ã¼ô²å¼þ£¬½áºÏºó¶Ë³ÌÐò£¨ÀýÈ磺PHP£©¿ÉÒÔ¿ìËÙµÄʵÏÖͼƬ²Ã¼ôµÄ¹¦ÄÜ¡£

ÔÚÏßʵÀý

ʵÀýÔ¤ÀÀ jQuery Jcrop ͼÏñ²Ã¼ô²å¼þ Hello World »ù´¡Ê¾Àý

ʵÀýÔ¤ÀÀ jQuery Jcrop ͼÏñ²Ã¼ô²å¼þ Basic Handler ʼþ´¦Àí

ʵÀýÔ¤ÀÀ jQuery Jcrop ͼÏñ²Ã¼ô²å¼þ°´¸ß¿í±ÈÀýÔ¤ÀÀ²Ã¼ôЧ¹û

ʵÀýÔ¤ÀÀ jQuery Jcrop ͼÏñ²Ã¼ô²å¼þ Animation / Transitions ¶¯»­/¹ý¶ÈЧ¹û

ʵÀýÔ¤ÀÀ jQuery Jcrop ͼÏñ²Ã¼ô²å¼þ API ʾÀý

ʵÀýÔ¤ÀÀ jQuery Jcrop ͼÏñ²Ã¼ô²å¼þ CSS Ñùʽ

ʵÀýÔ¤ÀÀ Jcrop ͼÏñ²Ã¼ô²å¼þ Non-image Cropping ·ÇͼƬ²Ã¼ô

Ò»¸ö·þÎñ¶ËPHP³ÌÐò²Ã¼ôµÄʾÀý

ʵÀýÔ¤ÀÀ jQuery Jcrop ʹÓÃPHPͼÏñ²Ã¼ôʵÀý

ʹÓ÷½·¨

ÔØÈë CSS Îļþ ÔØÈë JavaScript Îļþ

  • </script>
  • ¸ø IMG ±êÇ©¼ÓÉÏ ID µ÷Óà Jcrop

    ²ÎÊý˵Ã÷

    Ãû³Æ ĬÈÏÖµ ˵Ã÷

    allowSelect true ÔÊÐíÐÂÑ¡¿ò

    allowMove true ÔÊÐíÑ¡¿òÒƶ¯

    allowResize true ÔÊÐíÑ¡¿òËõ·Å

    trackDocument true Í϶¯Ñ¡¿òʱ£¬ÔÊÐí³¬³öͼÏñÒÔÍâµÄµØ·½Ê±¼ÌÐøÍ϶¯¡£

    baseClass 'jcrop' »ù´¡ÑùʽÃûǰ׺¡£ËµÃ÷£ºclass="jcrop-holder"£¬¸ü¸ÄµÄÖ»ÊÇÆäÖÐµÄ jcrop¡£

    Àý£º¼ÙÉèֵΪ "test"£¬ÄÇôÑùʽÃû»á¸ü¸ÄΪ "test-holder"

    addClass null Ìí¼ÓÑùʽ¡£

    Àý£º¼ÙÉèֵΪ "test"£¬ÄÇô»áÌí¼ÓÑùʽµ½class="jcrop-holder test"

    bgColor 'black' ±³¾°ÑÕÉ«¡£ÑÕÉ«¹Ø¼ü×Ö¡¢HEX¡¢RGB ¾ù¿É¡£

    bgOpacity 0.6 ±³¾°Í¸Ã÷¶È

    bgFade false ʹÓñ³¾°¹ý¶ÉЧ¹û

    borderOpacity 0.4 Ñ¡¿ò±ß¿ò͸Ã÷¶È

    handleOpacity 0.5 Ëõ·Å°´Å¥Í¸Ã÷¶È

    handleSize 9 Ëõ·Å°´Å¥´óС

    aspectRatio 0 Ñ¡¿ò¿í¸ß±È¡£ËµÃ÷£ºwidth/height

    keySupport true Ö§³Ö¼üÅÌ¿ØÖÆ¡£°´¼üÁÐ±í£ºÉÏÏÂ×óÓÒ£¨Òƶ¯Ñ¡¿ò£©¡¢Esc£¨È¡ÏûÑ¡¿ò£©

    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 Ö§³Ö fixed£¬ÀýÈ磺IE6¡¢iOS4

    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] Ñ¡¿ò×îС³ß´ç

    onChange function(){} Ñ¡¿ò¸Ä±äʱµÄʼþ

    onSelect function(){} Ñ¡¿òÑ¡¶¨Ê±µÄʼþ

    onDblClick function(){} ÔÚÑ¡¿òÄÚË«»÷ʱµÄʼþ

    onRelease function(){} È¡ÏûÑ¡¿òʱµÄʼþ

    API ½Ó¿Ú

    Ãû³Æ ˵Ã÷

    setImage(string) É趨£¨»ò¸Ä±ä£©Í¼Ïñ¡£Àý£ºjcrop_api.setImage('newpic.jpg')

    setOptions(object) É趨£¨»ò¸Ä±ä£©²ÎÊý£¬¸ñʽÓë³õʼ»¯ÉèÖòÎÊýÒ»Ñù

    setSelect(array) ´´½¨Ñ¡¿ò£¬²ÎÊý¸ñʽΪ£º[x, y, x2, y2]

    animateTo(array) Óö¯»­Ð§¹û´´½¨Ñ¡¿ò£¬²ÎÊý¸ñʽΪ£º[x, y, x2, y2]

    release() È¡ÏûÑ¡¿ò

    disable() ½ûÓà Jcrop¡£ËµÃ÷£ºÒÑÓÐÑ¡¿ò²»»á±»Çå³ý¡£

    enable() ÆôÓÃ Jcrop

    destroy() ÒƳý Jcrop

    tellSelect() »ñÈ¡Ñ¡¿òµÄÖµ£¨Êµ¼Ê³ß´ç£©¡£Àý£ºconsole.log(jcrop_api.tellSelect())

    tellScaled() »ñÈ¡Ñ¡¿òµÄÖµ£¨½çÃæ³ß´ç£©¡£Àý£ºconsole.log(jcrop_api.tellScaled())

    getBounds() »ñȡͼƬʵ¼Ê³ß´ç£¬¸ñʽΪ£º[w, h]

    getWidgetSize() »ñȡͼƬÏÔʾ³ß´ç£¬¸ñʽΪ£º[w, h]

    getScaleFactor() »ñȡͼƬËõ·ÅµÄ±ÈÀý£¬¸ñʽΪ£º[w, h]

     

    ÏÂÔØ

     



    ¶¥

    ²È

  • ÉÏһƪ£ºÃ»ÓÐÁË
  • ÏÂһƪ£ºÈçºÎ×Ô¼º¿ª·¢Ò»¸ö¼òµ¥µÄjquery ²å¼þ

    ¡¡

    1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

    Ïà¹ØÎÄÕÂ
    • dz̸jQuery¼¼ÊõÔÚWeb¿ª·¢ÖеÄÓ¦ÓÃ

      dz̸jQuery¼¼ÊõÔÚWeb¿ª·¢ÖеÄÓ¦ÓÃ

      2017-02-09 09:00

    • jQuery Mobile ¼ò½é

      jQuery Mobile ¼ò½é

      2017-02-08 13:02

    • JQuery DataTablesѧϰ

      JQuery DataTablesѧϰ

      2017-02-07 16:01

    • jQuery Mobile¿ª·¢¼Çʱ¾Ó¦ÓÃËÄ´ó¼¼ÇÉ

      jQuery Mobile¿ª·¢¼Çʱ¾Ó¦ÓÃËÄ´ó¼¼ÇÉ

      2017-02-06 13:01

    ÍøÓѵãÆÀ
    È