jQuery的图片剪切插件2

最新推荐文章于 2024-07-26 20:46:33 发布

weixin_34275734

最新推荐文章于 2024-07-26 20:46:33 发布

阅读量63

点赞数

文章标签： javascript php ViewUI

imgAreaSelect

imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr).

Plugin features:

Highly configurable
Customizable with CSS styling
Handles scaled images
Keyboard support for moving and resizing the selection
Supports callback functions
Provides API functions for easier integration with other application components
Lightweight — the packed version is less than 8KB

The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Live Example

Click and drag on the image to select an area.

Selection Preview

Coordinates		Dimensions
X₁:		Width:
Y₁:		Height:
X₂:
Y₂:

» See more examples

Quick Usage Instructions

Download the plugin, unzip it, and copy the JavaScript and CSS files to your website/application directory. Load the files in the <head> section of your HTML document.

<head>
  ...
<linkrel="stylesheet"type="text/css"href="css/imgareaselect-default.css"/><scripttype="text/javascript"src="scripts/jquery.min.js"></script><scripttype="text/javascript"src="scripts/jquery.imgareaselect.pack.js"></script>
  ...
</head>

Then, to enable selection on an image, wrap it in a jQuery object and call the imgAreaSelect() method:

<scripttype="text/javascript">
$(document).ready(function(){    $('img#photo').imgAreaSelect({
        handles:true,
        onSelectEnd: someFunction
    });});</script>

» Read documentation

Download

jquery.imgareaselect-0.9.8.zip – a zip archive containing the plugin source (packed version included), a minified version of jQuery, CSS and graphics files, and license text files.