jQuery的图片剪切插件2
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 | ||
|---|---|---|---|
| X1: | Width: | ||
| Y1: | Height: | ||
| X2: | |||
| Y2: | |||
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>
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.
For Developers
For web developers who want to extend/modify the plugin, here's a fully documented version of the source code:
jquery.imgareaselect.dev.js
License
Dual licensed under the MIT and GPL licenses.
Links
imgAreaSelect on jQuery Plugins
PHP & jQuery image upload and crop tutorial at WebMotionUK
Using imgAreaSelect and GD library to crop and create thumbnails at Leon Kessler's blog
AjaxCrop – Jquery and PHP Crop tool at Keith Levi Lumanog's blog
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 分享 3 个 .NET 开源的文件压缩处理库，助力快速实现文件压缩解压功能！
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述