jQuery图片剪裁插件 Jcrop

txf2004

浏览: 6873293 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Introduction

Jcrop is a powerful image cropping engine for jQuery.

It's been designed so developers can easily integrate an advanced image cropping functionality directly into any web-based application without sacrificing power and flexibility (or the weeks of coding, testing and debugging). Jcrop also features clean, well-organized code that works well across most modern web browsers.

Here you'll find the documentation for Jcrop itself. This guide assumes that you have a basic knowledge of HTML and including files into a web page. At the end of the article, there are links to more advanced concepts and implementation techniques.

Getting Started

Download the current version of Jcrop
Place the files on your web server so you can request them from your page
You also must havejQueryinstalled and included!

In the page <head> you'll need to load the requisite files.That includes:

jQuery library
Jcrop Javascript
Jcrop CSS stylesheet

It should look something like this:

<script src="js/jquery.pack.js"></script>
<script src="js/jquery.Jcrop.pack.js"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

Please note:These are only example paths, you probablywillneed to adjust them when you actually use them, to match the location of the files on your server. Jcrop will not function properly if you don't.

Invocation

Let's suppose we have this image our markup:

<img src="flowers.jpg" id="cropbox" />

To convert this into a Jcrop widget, insert the following script:

<script language="Javascript">
    jQuery(function() {
        jQuery('#cropbox').Jcrop();
    });
</script>

Jcrop's default behavior is activated.Since there are no event handlers attached, it won't do anything cool, but you can see how easy it is to implement Jcrop into your page.

See the Jcrop "hello world" example

Event Handlers

Jcrop's two primary event handlers areonChangeandonSelect.

onSelect onChange

callback	Called when selection is completed
callback	Called when the selection is moving

Define an event handler function:

<script language="Javascript">

  function showCoords(c)
  {
      // variables can be accessed here as
      // c.x, c.y, c.x2, c.y2, c.w, c.h
  };

</script>

Attach event handlers like this:

<script language="Javascript">

    jQuery(function() {
        jQuery('#cropbox').Jcrop({
            onSelect: showCoords,
            onChange: showCoords
        });
    });

</script>

This is a conventional jQuery syntax. Note that the last property does not have a comma following (also applies if there is only one property specified). Also be sure to leave off parenthesis on callback functions (you're referring to the named function, not calling it).

See the simple event handler demo

Setting Options

Jcrop options allow you to alter appearance and behavior.

Option Name Value Type Description Default

aspectRatio	decimal	Aspect ratio of w/h (e.g. 1 for square)	n/a
minSize	array [ w, h ]	Minimum width/height, use 0 for unbounded dimension	n/a
maxSize	array [ w, h ]	Maximum width/height, use 0 for unbounded dimension	n/a
setSelect	array[ x, y, x2, y2 ]	Set an initial selection area	n/a
bgColor	color value	Set color of background container	'black'
bgOpacity	decimal0 - 1	Opacity of outer image when cropping	.6

Set these options in the same way as event handlers.

Here's an example:

<script language="Javascript">

    jQuery(function() {
        jQuery('#cropbox').Jcrop({
            onSelect:    showCoords,
            bgColor:     'black',
            bgOpacity:   .4,
            setSelect:   [ 100, 100, 50, 50 ],
            aspectRatio: 16 / 9
        });
    });

</script>

Note a few things about the format of the options object:

Text values must be quoted (e.g. 'red', '#ccc', 'rgb(10,10,10)')
Numeric values, including decimals, should not be quoted.
setSelecttakes an array, here indicated as an array literal
aspectRatiomay be easiest to set by dividing width/height
The last option is not followed by a comma

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论