jQuery图片剪裁插件 Jcrop
来源:互联网 发布:centos中文官网 编辑:程序博客网 时间:2024/05/23 22:21
jcrop-> http://deepliquid.com/content/Jcrop_Manual.html
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 have jQuery installed 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 probably will need 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 are onChange and onSelect.
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.
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.
- setSelect takes an array, here indicated as an array literal
- aspectRatio may be easiest to set by dividing width/height
- The last option is not followed by a comma
Further Reading
- Completing the Crop - implementing the server-side
- API Documentation - advanced functionality
- Sizing Issues - working with large images
- Changing Appearance - skinning the look and feel
- Internet Explorer Notes - quirks and issues in IE6+
- Troubleshooting Problems - when it's this easy?
- jQuery图片剪裁插件 Jcrop
- jQuery图片剪裁插件 Jcrop
- JQUERY剪裁图片插件
- jquery插件图片裁剪jcrop
- 实现图像剪裁 jquery.Jcrop
- Jquery 的在线图片剪裁插件
- 使用jquery jcrop插件进行图片的截取与保存
- Jquery Jcrop 插件java的使用方法 包括图片保存类
- 使用jquery jcrop插件进行图片的截取与保存
- 使用jquery jcrop插件进行图片的截取与保存
- jQuery jcrop插件截图使用方法
- jQuery jcrop插件截图使用方法
- jQuery jcrop插件截图使用方法
- jQuery 图像裁剪插件Jcrop
- 图片裁剪插件jcrop用法
- thinkphp jquery剪切图片 Jcrop
- 使用Jcrop实现图片上传、剪裁和保存(ASP.NET)
- 基于Jcrop做客户端无上传图片剪裁
- session
- Cisio live 2011 Presentations 国内网盘下载
- volatile关键字
- UVA 10451 Ancient Village Sports && UVA 11909 Soya Milk && UVA 11152 Colourful Flowers
- android 用户界面和视图绘制(二)
- jQuery图片剪裁插件 Jcrop
- 很低级的错误
- 2011阿里巴巴程序设计公开赛 / 1002 Fruit Ninja
- STL 标准容器比较
- java.sql.SQLException: java.lang.LinkageError: Class oracle/jdbc/ttc7/MAREngine violates loader cons
- 环境变量中的dt.jar....
- [转]Color类,中英文对照
- zoj 3471 Most Powerful //状态压缩DP
- vs2008上QT中增加智能提示功能