Jcrop是一个功能强大的图像裁剪引擎jQuery的。
它的设计使开发人员可以很容易地直接集成了先进的图像裁剪功能集成到任何基于Web的应用程序在不牺牲动力和灵活性(或编码,测试和调试的星期)。Jcrop还设有干净,组织良好的代码,在大多数现代的web浏览器效果很好。
在<HEAD>你需要加载必要文件的页面 这包括:
jQuery库
Jcrop的Javascript
Jcrop CSS样式表
它应该是这个样子:
- <script src="js/jquery.min.js"> </ SCRIPT>
- <script src="js/jquery.Jcrop.min.js"> </ SCRIPT>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
入门第一个简单点的Demo:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Insert title here</title>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script src="js/jquery.Jcrop.min.js"></script>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
- <script>
- jQuery(function(){
- jQuery('#user_preview_img').Jcrop({
- trackDocument: true
- });
- });
- </script>
- </head>
- <body>
- <img alt="" src="images/area1/1.jpg" id="user_preview_img">
- </body>
- </html>
效果图:
jcrop简单的事件处理Demo:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Insert title here</title>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script src="js/jquery.Jcrop.min.js"></script>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
- <script>
- jQuery(document).ready(function(){
- jQuery('#user_preview_img').Jcrop({
- onChange: showCoords,
- onSelect: showCoords
- });
- });
- // Simple event handler, called from onChange and onSelect
- // event handlers, as per the Jcrop invocation above
- function showCoords(c)
- {
- jQuery('#x1').val(c.x);
- jQuery('#y1').val(c.y);
- jQuery('#x2').val(c.x2);
- jQuery('#y2').val(c.y2);
- jQuery('#w').val(c.w);
- jQuery('#h').val(c.h);
- };
- </script>
- </head>
- <body>
- <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>
- <form onsubmit="return false;" class="coords">
- <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
- <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
- <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
- <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
- <label>W <input type="text" size="4" id="w" name="w" /></label>
- <label>H <input type="text" size="4" id="h" name="h" /></label>
- </form>
- </body>
- </html>
效果图:
jcrop实例演示Demo3:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Insert title here</title>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script src="js/jquery.Jcrop.min.js"></script>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
- <script>
- jQuery(document).ready(function(){
- jQuery('#user_preview_img').Jcrop({
- onChange: showCoords,
- onSelect: showCoords,
- bgColor: 'red',
- bgOpacity: .4,
- setSelect: [ 100, 100, 50, 50 ],
- aspectRatio: 16 / 9
- });
- });
- // Simple event handler, called from onChange and onSelect
- // event handlers, as per the Jcrop invocation above
- function showCoords(c)
- {
- jQuery('#x1').val(c.x);
- jQuery('#y1').val(c.y);
- jQuery('#x2').val(c.x2);
- jQuery('#y2').val(c.y2);
- jQuery('#w').val(c.w);
- jQuery('#h').val(c.h);
- };
- </script>
- </head>
- <body>
- <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>
- <form onsubmit="return false;" class="coords">
- <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
- <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
- <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
- <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
- <label>W <input type="text" size="4" id="w" name="w" /></label>
- <label>H <input type="text" size="4" id="h" name="h" /></label>
- </form>
- </body>
- </html>
效果图:
Jcrop实例Demo4:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
- <title>Insert title here</title>
- <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
- <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script src="js/jquery.Jcrop.min.js"></script>
- <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />
- <script type="text/javascript">
- jQuery(function($){
- // Create variables (in this scope) to hold the API and image size
- var jcrop_api,
- boundx,
- boundy,
- // Grab some information about the preview pane
- $preview = $('#preview-pane'),
- $pcnt = $('#preview-pane .preview-container'),
- $pimg = $('#preview-pane .preview-container img'),
- xsize = $pcnt.width(),
- ysize = $pcnt.height();
- console.log('init',[xsize,ysize]);
- $('#user_preview_img').Jcrop({
- onChange: updatePreview,
- onSelect: updatePreview,
- aspectRatio: xsize / ysize
- },function(){
- // Use the API to get the real image size
- var bounds = this.getBounds();
- boundx = bounds[0];
- boundy = bounds[1];
- // Store the API in the jcrop_api variable
- jcrop_api = this;
- // Move the preview into the jcrop container for css positioning
- $preview.appendTo(jcrop_api.ui.holder);
- });
- function updatePreview(c)
- {
- if (parseInt(c.w) > 0)
- {
- var rx = xsize / c.w;
- var ry = ysize / c.h;
- $pimg.css({
- width: Math.round(rx * boundx) + 'px',
- height: Math.round(ry * boundy) + 'px',
- marginLeft: '-' + Math.round(rx * c.x) + 'px',
- marginTop: '-' + Math.round(ry * c.y) + 'px'
- });
- }
- };
- });
- </script>
- <style type="text/css">
- /* Apply these styles only when #preview-pane has
- been placed within the Jcrop widget */
- .jcrop-holder #preview-pane {
- display: block;
- position: absolute;
- z-index: 2000;
- top: 10px;
- right: -280px;
- padding: 6px;
- border: 1px rgba(0,0,0,.4) solid;
- background-color: white;
- -webkit-border-radius: 6px;
- -moz-border-radius: 6px;
- border-radius: 6px;
- -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
- -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
- box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
- }
- /* The Javascript code will set the aspect ratio of the crop
- area based on the size of the thumbnail preview,
- specified here */
- #preview-pane .preview-container {
- width: 250px;
- height: 170px;
- overflow: hidden;
- }
- </style>
- </head>
- <body>
- <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>
- <div id="preview-pane">
- <div class="preview-container">
- <img src="images/area1/1.jpg" class="jcrop-preview" alt="Preview" />
- </div>
- </div>
- </body>
- </html>
效果图:
注意:有关这些选项的对象的格式的几件事情:
文本值必须加引号(如'红','#CCC“,”RGB(10,10,10)')
数值,包括小数点,不应该被引用。
setSelect带有一个数组,这里表示为一个数组文本
aspectRatio可能是最简单的除以宽度/高度设置
后面没有逗号的最后一个选项
jQuery(function(){
});
全写为
jQuery(document).ready(function(){
});
3.常用选项设置
aspectRatio:选中区域按宽/高比,为1表示正方形。
minSize:最小的宽,高值。
maxSize:最大的宽,高值。
setSelect:设置初始选中区域。
bgColor:背景颜色
bgOpacity:背景透明度。
allowResize:是否允许改变选中区域大小。
allowMove:是否允许移动选中区域。
- $( function() {
- $("#demoImage").Jcrop({
- aspectRatio: 1, //选中区域宽高比为1,即选中区域为正方形
- bgColor:"#ccc", //裁剪时背景颜色设为灰色
- bgOpacity:0.1, //透明度设为0.1
- allowResize:false, //不允许改变选中区域的大小
- setSelect:[0,0,100,100] //初始化选中区域
- }
- );
- }
- );
4.api用法
api.disable(); //设置为禁用裁剪效果
api.enable(); //设置为启用裁剪效果
api.setOptions({allowResize:false});//设置相应配置
api.setSelect([0,0,100,100]); //设置选中区域
- $( function() {
- //事件处理
- $("#demoImage").Jcrop(
- {
- onChange:showCoords, //当选择区域变化的时候,执行对应的回调函数
- onSelect:showCoords //当选中区域的时候,执行对应的回调函数
- }
- );
- }
- );
- function showCoords(c) {
- $("#txtX1").val(c.x); //得到选中区域左上角横坐标
- $("#txtY1").val(c.y); //得到选中区域左上角纵坐标
- $("#txtX2").val(c.x2); //得到选中区域右下角横坐标
- $("#txtY2").val(c.y2); //得到选中区域右下角纵坐标
- $("#txtWidth").val(c.w); //得到选中区域的宽度
- $("#txtHeight").val(c.h); //得到选中区域的高度
- }
相关推荐
`Jcrop`是另一个关键点,这是一个JavaScript图像裁剪库,常用于前端实现用户交互式的图像裁剪功能。Jcrop允许用户在网页上选择感兴趣的图像区域,然后将这些坐标传递给服务器,以便在后端进行实际的裁剪操作。它提供...
在本文中,我们将探讨如何利用Jcrop和bootstrap-fileinput这两个插件来实现一个头像上传功能,同时确保图片上传至服务器时为正方形,并且在上传前进行适当的压缩和裁剪,以减轻浏览器的压力。首先,Jcrop是一个...
区块链_智能合约_Solidity_保险应用_基于以太坊的技_1744433266
内容概要:本文档详细介绍了在Windows系统上安装MySQL数据库的具体步骤。首先,需要配置系统环境变量,包括新建MYSQL_HOME变量并将其添加到PATH中;其次,创建并编辑my.ini配置文件,设置MySQL的基本参数如端口、字符集、数据存放目录等;接着,在命令行工具中通过一系列指令完成MySQL的初始化、服务安装、启动以及root用户的密码设置和权限调整。整个流程涵盖了从环境搭建到最终确保MySQL服务正常运行的所有关键环节。 适合人群:适用于有一定计算机操作基础,尤其是对数据库管理有一定兴趣或需求的技术人员。 使用场景及目标:①帮助用户在本地机器上成功部署MySQL数据库环境;②确保用户能够掌握MySQL的基本配置与管理技能,如环境变量配置、服务安装与卸载、用户权限管理等。 其他说明:在安装过程中可能会遇到一些常见问题,例如由于之前版本残留导致的服务安装失败,此时可以通过命令行删除旧服务(sc delete mysql)来解决。此外,为了保证安全性,务必及时修改root用户的初始密码。
内容概要:`STARTUP.A51` 是 Keil C51 编译器自带的启动文件,用于初始化 8051 单片机的硬件和软件环境。该文件主要完成三个任务:初始化堆栈指针、清零内部数据存储器、跳转到主程序。文件中定义了内存模式(如 SMALL),并设置了堆栈指针的初始值为 0x60。接着通过循环将内部数据存储器的所有字节清零,确保程序开始时数据存储器的状态是确定的。此外,文件还列出了 8051 单片机的各个中断向量地址,并为每个中断提供占位符,实际的中断处理程序需要在其他文件中实现。最后,启动代码段初始化堆栈指针和数据段后,跳转到 `MAIN` 函数开始执行主程序。; 适合人群:对嵌入式系统开发有一定了解,尤其是使用 8051 单片机的开发者。; 使用场景及目标:①理解 8051 单片机启动文件的工作原理;②掌握如何初始化堆栈指针和数据段;③熟悉中断向量表的设置及其作用。; 其他说明:此文件为程序正常运行提供了必要的初始化操作,开发者可以根据具体需求修改该文件以适应不同的硬件和软件环境。
内容概要:该论文研究了一种基于行波理论的输电线路故障诊断方法。当输电线路发生故障时,故障点会产生向两侧传播的电流和电压行波。通过相模变换对三相电流行波解耦,利用解耦后独立模量间的关系确定故障类型和相别,再采用小波变换模极大值法标定行波波头,从而计算故障点距离。仿真结果表明,该方法能准确识别故障类型和相别,并对故障点定位具有高精度。研究使用MATLAB进行仿真验证,为输电线路故障诊断提供了有效解决方案。文中详细介绍了三相电流信号生成、相模变换(Clarke变换)、小波变换波头检测、故障诊断主流程以及结果可视化等步骤,并通过多个实例验证了方法的有效性和准确性。 适合人群:具备一定电力系统基础知识和编程能力的专业人士,特别是从事电力系统保护与控制领域的工程师和技术人员。 使用场景及目标:①适用于电力系统的故障检测与诊断;②能够快速准确地识别输电线路的故障类型、相别及故障点位置;③为电力系统的安全稳定运行提供技术支持,减少停电时间和损失。 其他说明:该方法不仅在理论上进行了深入探讨,还提供了完整的Python代码实现,便于读者理解和实践。此外,文中还讨论了行波理论的核心公式、三相线路行波解耦、行波测距实现等关键技术点,并针对工程应用给出了注意事项,如波速校准、采样率要求、噪声处理等。这使得该方法不仅具有学术价值,也具有很强的实际应用前景。
内容概要:本文详细介绍了光伏-混合储能微电网能量管理系统的模型架构及其控制策略。首先探讨了光伏发电模块中的MPPT(最大功率点跟踪)控制,采用扰动观察法和改进型变步长策略来提高光伏板的发电效率。接着重点讲解了混合储能系统的功率分配,利用一阶低通滤波算法将功率需求分为低频和高频两部分,分别由蓄电池和超级电容处理。此外,文中还深入讨论了SOC(荷电状态)管理策略,确保电池和超级电容在不同工作状态下保持最佳性能。仿真结果显示,在光伏出力剧烈波动的情况下,系统能够有效地维持稳定的电压水平,并显著提高了储能设备的使用寿命。 适合人群:对光伏微电网、储能技术和能量管理系统感兴趣的科研人员、工程师和技术爱好者。 使用场景及目标:适用于研究和开发高效、可靠的光伏-混合储能微电网系统,旨在优化能量管理和提高系统稳定性。具体应用场景包括但不限于家庭光伏系统、小型微电网以及工业能源管理系统。 其他说明:文中提供了详细的代码实现和仿真结果,便于读者理解和复现实验。同时,模型设计采用了模块化思路,方便进行个性化修改和扩展。
内容概要:本文详细介绍了基于MATLAB和CVX平台实现的储能调峰调频联合优化模型。该模型不仅涵盖了储能的基本参数设定、负荷不确定性处理、充放电策略制定,还包括了调峰调频的联合调度、功率约束处理、鲁棒优化等方面的内容。通过构建考虑电池退化成本、充放电功率约束以及用户负荷不确定性的储能优化模型,展现了储能系统在电力系统中的高效协同工作。文中提供了详细的代码示例,解释了各个部分的功能和实现方法,强调了模型的深度与创新性。 适合人群:适用于具有一定编程基础和技术背景的研究人员、工程师以及希望深入了解储能系统优化的学生。 使用场景及目标:该模型主要用于电力系统中储能设备的优化调度,旨在提高储能系统的经济效益和社会效益。通过联合调峰调频,能够显著提升储能系统的收益,实现1+1>2的超线性增益效果。此外,该模型还可以用于教学和科研,帮助初学者理解和掌握储能优化的相关技术和理论。 其他说明:代码中包含了丰富的注释和模块化的子程序,使得整个模型易于理解和扩展。对于有经验的开发者,可以在现有基础上进一步改进和定制,以适应不同的应用场景。
大模型技术白皮书2023版
图像增广 PyTorch 版
批量修改文件名可以帮助用户节省大量时间,提高工作效率 里面附带使用教程
《计算机应用基础》第2章--Windows-XP操作系统.ppt
包括:源程序工程文件、Proteus仿真工程文件、电路原理图文件、配套技术手册、论文资料等 1、采用51/52单片机(通用)作为主控芯片; 2、采用1602液晶显示使用过程及状态,液晶屏亮度会随光线自动调整; 3、按键输入6位密码,输入密码正确则锁打开,显示open!输入密码错误次数超过3次,蜂鸣器报警并且锁定键盘; 4、密码可以自己修改,必须是锁打开时才能改密,为防止误操作,修改密码得输入两次; 5、采用24C02保存密码,掉电不丢失; 6、可通过红外遥控器输入密码操作锁的状态;
内容概要:本文深入剖析了2025年全球感知技术的十大发展趋势,涵盖多模态感知融合、3D感知与空间计算、脑机接口中的感知反馈技术、5G/6G赋能的超低延迟感知、语音与情感识别的高级化、生物感知与数字健康、环境感知与自适应智能、增强现实(AR)与触觉反馈技术、气味与化学感知、量子感知与极端条件测量。文章详细介绍了每项技术的技术原理、关键算法、实现方式、商业案例及未来前景,强调了感知技术在智慧城市、自动驾驶、智慧医疗、工业自动化等领域的深刻影响。报告指出,感知技术正从单一传感模式向多模态融合、从二维数据向三维空间重建、从传统网络通信向超低延迟和高可靠性网络升级,实现全场景、全维度的智能感知。; 适合人群:对感知技术感兴趣的科技爱好者、研究人员、决策者、企业管理层和投资人。; 使用场景及目标:①了解感知技术的最新进展和未来发展方向;②为技术研究提供全面、深入的参考;③为商业应用提供具体的案例和前景分析;④推动跨领域协同创新,构建开放共赢的产业生态。; 其他说明:报告基于近年来技术研发的最新进展、业界前沿的技术路线以及各大科技企业在商业落地方面的丰富实践。随着感知技术的不断成熟,数据隐私与安全保护问题也需高度重视,以确保技术进步与社会伦理和谐统一。未来,感知技术将成为推动社会进步和产业升级的重要力量,为实现万物互联、智慧决策和智能体验提供无限可能。
本论文主要论述了如何使用JAVA语言开发一个校园新闻网站 ,本系统将严格按照软件开发流程进行各个阶段的工作,采用B/S架构,面向对象编程思想进行项目开发。在引言中,作者将论述校园新闻网站的当前背景以及系统开发的目的,后续章节将严格按照软件开发流程,对系统进行各个阶段分析设计。 校园新闻网站的主要使用者分为管理员和用户,实现功能包括管理员:首页、个人中心、用户管理、新闻类型管理、校园新闻管理、留言板管理、论坛交流、系统管理,用户前台:首页、校园新闻、论坛交流、留言反馈、个人中心、后台管理等功能。由于本网站的功能模块设计比较全面,所以使得整个校园新闻网站信息管理的过程得以实现。 本系统的使用可以实现本校园新闻网站管理的信息化,可以方便管理员进行更加方便快捷的管理,可以提高管理人员的工作效率。 基于Springboot+vue的校园新闻网站【源码+数据库+参考论文】 感兴趣自行下载学习!
内容概要:本文详细探讨了三相三电平PWM整流器的闭环控制策略及其核心技术——三电平SVPWM算法。文章首先介绍了三相三电平PWM整流器的基本概念和优势,如输出三种电平以降低谐波含量并减少滤波器体积和成本。接着阐述了闭环控制策略的重要性,强调了电压外环和电流内环的双闭环控制机制。随后,文章深入讲解了三电平SVPWM算法的工作原理,包括空间电压矢量的选择、扇区判断、矢量作用时间和死区补偿等关键技术环节。此外,还讨论了中点电位平衡的问题以及PI参数的整定方法。最后,通过示波器测试验证了系统的性能指标,如THD低于3%,直流电压纹波小于1%。 适合人群:从事电力电子领域的工程师和技术人员,尤其是对三相三电平PWM整流器及其控制策略感兴趣的读者。 使用场景及目标:适用于高压大功率场合,旨在提高整流器的性能,降低谐波含量,实现单位功率因数运行。通过合理设计闭环控制策略和优化SVPWM算法,确保整流器在各种工况下都能稳定、高效地工作。 其他说明:文中提供了大量MATLAB和C语言代码片段,帮助读者更好地理解和实现相关算法。同时,针对实际调试过程中遇到的问题给出了实用的解决方案,如中点电位平衡和死区补偿等。
全新红娘本地交友系统定制版源码 相亲婚恋交友小程序源码
内容概要:文章探讨了AI技术,特别是DeepSeek,如何驱动地图生成的变革。首先介绍了地图制图在AI时代的背景与挑战,强调了DeepSeek与地图融合的两种主要方式:嵌入地图制图链和研发地图语言自身的预训练模型。随后详细描述了DeepSeek在地图生成中的具体应用,包括智能化地图生成器DoMapAI的整体框架,地图制图链中的知识图谱推理路径,以及地图语言的Token化过程。最后,文章总结了AI时代地图制图的职业变化和技术变革,指出地图制图正经历“大变局”。 适合人群:从事地图制图及相关领域的研究人员、工程师,以及对AI与地图生成感兴趣的学者。 使用场景及目标:①理解AI技术在地图生成中的应用,特别是DeepSeek的作用;②掌握智能化地图生成器DoMapAI的工作原理及其应用场景;③学习地图语言Token化的方法及其在地图生成中的应用;④探索AI时代地图制图的职业发展方向和技术变革。 阅读建议:本文内容较为专业,建议读者先了解基本的AI技术和地图制图知识。重点关注DeepSeek与地图融合的具体方法和应用场景,理解智能化地图生成器DoMapAI的工作流程,以及地图语言Token化的实现过程。在阅读过程中,可以结合实际案例进行思考,以更好地理解AI技术对地图制图的影响。
chromedriver-mac-arm64-135.0.7049.114.zip
《网络布线与小型局域网搭建(第2版)》第3章-布线系统的设计.ppt