jQuery plugins - Jcrop
marc 16

Jcrop

Képek megjelölése/vágása

Verzió: 0.9.8
Kiadás dátuma: 2009/04/20
Fejlesztő: Kelly Hallman
Liszensz: MIT

Bevezető

A Jcrop hasznos lehet képfeltöltésnél, de a közösségi oldalakon jól ismert "képmegjelölés" is kivitelezhető vele (amikor egy képen bejelöljük egy ismerősünket).

Fontos, hogy tisztában legyünk vele, a plugin neve félrevezető! A "crop" szóból tévesen arra következtethetünk, hogy kivághatjuk vele képek tetszőleges részletét, de valójában ehhez szerver oldali alkalmazásra van szükség. A plugin mindössze csak asszisztál a művelethez: egy interface-t biztosít ahhoz, hogy egy képen tetszőleges területet jelölhessünk ki, amelynek lekérdezhetjük a különböző paramétereit (koordináta, szélesség, magasság).

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/jquery.Jcrop.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.Jcrop.js"></script>
          

Deklaráció

            $(document).ready(function(){ 
              $('#kep').Jcrop();
            }); 
          

Teljes paraméterlista

  • baseClass: CSS szelektorok előtagja (alapértelmezett: 'jcrop')
  • bgColor: vágás esetén a kijelöletlen terület színe (alapértelmezett: 'black')
  • bgOpacity: a bgColor paraméterben megadott szín áttetszősége [0..1] (alapértelmezett: .6)
  • borderOpacity: a kijelölés szegélyének áttetszősége (alapértelmezett: .4)
  • handleOpacity: a fogópontok áttetszősége (alapértelmezett: .5)
  • handleSize: a kijelölés éleinél az egérmutató érzékenységének mértéke pixel-ben
    (alapértelmezett: 9)
  • handleOffset: a kijelölő négyzetek pozícionálása/eltolása pixelben a kijelöléshez képest (alapértelmezett: 5)
  • aspectRatio: a kijelölés oldalainak arányszáma (szélesség/magasság) - 0 érték esetén a kijelölés tetszőleges lehet (alapértelmezett: 0)
  • keySupport: a kijelölés mozgatásához a billentyűzet engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • cornerHandles: sarok fogópontok engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • sideHandles: oldalsó fogópontok engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • drawBorders: a kijelölés szegélyének engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • dragEdges: a kijelölés-élek módosításának engedélyezése/tiltása (true | false)
    (alapértelmezett: true)
  • boxWidth: a kép konténer elemének maximum szélessége pixel-ben - 0 érték esetén nincs korlátozás (alapértelmezett: 0)
  • boxHeight: a kép konténer elemének maximum magassága pixel-ben - 0 érték esetén nincs korlátozás (alapértelmezett: 0)
  • trueSize: átméretezett kép esetén a paraméter segítségével megadható az eredeti képméret, így kivágást követően az új kép kalkulációjának alapját nem a megjelenített (torzított), hanem az eredeti kép szolgáltatja
  • boundary: a kép széleinél az egérmutató érzékenységének mértéke pixel-ben (alapértelmezett: 8)
  • animationDelay: az animáció sebessége az animeTo() metódus használatánál
    (alapértelmezett: 20)
  • swingSpeed: az animációhoz használt swing effekt sebessége (alapértelmezett: 3)
  • allowSelect: kijelölés engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • allowMove: kijelölés mozgatásának engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • allowResize: kijelölés átméretezésének engedélyezése/tiltása (true | false) (alapértelmezett: true)
  • minSelect: minimálisan kijelölhető terület szélessége/magassága pixel-ben, tömbként - 0 érték esetén nincs alsó korlát (alapértelmezett: [0, 0])
  • maxSize: maximális szélesség/magasság pixel-ben, tömbként - 0 érték esetén nincs felső korlát (alapértelmezett: [0, 0])
  • minSize: minimális szélesség/magasság pixel-ben, tömbként - 0 érték esetén nincs alsó korlát (alapértelmezett: [0, 0])
  • setSelect: kezdeti kijelölés definiálása [x1, y1, x2, y2]
  • onChange: függvény meghívása kijelölés módosulásakor
  • onSelect: függvény meghívása a kijelölés végén
Metódusok
  • setSelect([tömb]): egy megadott terület kijelölése (tömb: [x0, y0, x1, y1])
  • animateTo([tömb]): az aktuális kijelölés animált átváltása egy másik kijelölésbe
    (tömb: [x0, y0, x1, y1])
  • release(): az aktuális kijelölés megszüntetése
  • tellSelect(): az aktuális kijelölés paramétereinek lekérdezése objektumként - eredeti képméret szerint (x, x2, y, y2, w - szélesség, h - magasság)
    Példa: a kijelölés szélességének lekérdezése
                    var parameterek = kijeloltTerulet.tellSelect();
                    consloe.log('szélesség: ' + parameterek.w);
                  
  • tellScaled(): az aktuális kijelölés paramétereinek lekérdezése objektumként - a megjelenített, átméretezett képméret szerint (használata hasonló a tellSelect() metóduséhoz)
  • disable(): a plugin használatának tiltása
  • enable(): a plugin használatának engedélyezése
  • destroy(): a plugin megszüntetése
  • getBounds(): tömb formájában adja vissza a kép maximális x és y koordinátáit