比较上一个版本多了缩略效果，但是切割图的地方还没有做大小缩放功能，等有时间做出来了继续更新，谢谢大家捧场哈
老规矩，先上html代码(没有对图片大小边界做判断，只对容器做了判断，请注意~
)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{margin:0; padding:0;}
.imageCut{width:524px; background:#f1f7fb; padding:20px;}
#picDiv{width:300px; height:300px; background:#000; border:1px solid #999; float:left; margin-right:20px; position:relative; overflow:hidden;}
#picDiv img{position:absolute; top:0px; left:0px;}
#picCut{width:200px; height:200px; border:1px solid #fff; cursor:move; list-style:none; position:relative; z-index:200;}
#picCutChange{width:13px; height:13px; background:url(picCutChange.gif) no-repeat; cursor:se-resize; overflow:hidden; position:absolute; bottom:0; right:0;}
#picSeeBig{width:200px; height:200px; border:1px solid #fff; float:left; overflow:hidden; position:relative;}
#picSeeSmall{width:50px; height:50px; border:1px solid #fff; float:left; margin-bottom:20px; overflow:hidden; position:relative;}
form{clear:both; text-align:right;}
</style>
</head>
<body>
<div class="imageCut">
<div id="picDiv">
<img src="../../images/2.jpg" />
</div>
<div id="picSeeSmall"></div>
<div id="picSeeBig"></div>
<form action="cutPic.php" method="post">
<input type="submit" value=" 提 交 " />
<input type="hidden" id="picSeeSmallInfor" name="picSeeSmallInfor" />
<input type="hidden" id="picSeeBigInfor" name="picSeeBigInfor" />
</form>
</div>
<script type="text/javascript">
(function(){
window.onload=cutImage;
function cutImage(){
var pDiv=document.getElementById('picDiv');
pDiv.innerHTML='<div id="picCut"><div id="picCutChange"></div></div>'+pDiv.innerHTML;
var pDivImg=pDiv.getElementsByTagName('img')[0],
clip=pDiv.getElementsByTagName('img')[1],
pCut=document.getElementById('picCut'),
pChange=document.getElementById('picCutChange');
pSeeS=document.getElementById('picSeeSmall'),
pSee=document.getElementById('picSeeBig'),
pDivW=pDiv.offsetWidth-2,
pDivH=pDiv.offsetHeight-2,
opacity=function(obj,v){
if(!-[1,]){obj.style.filter='alpha(opacity='+v+')';};
obj.style.MozOpacity=v/100;
obj.style.opacity=v/100;
},
see=function(){
var getPos={
't':pCut.offsetTop,
"l":pCut.offsetLeft,
'w':pCut.offsetWidth,
'h':pCut.offsetHeight,
'kw':(pDivImg.width-pDivW)/Math.max(1,pDivW-pCut.offsetWidth),
'kh':(pDivImg.height-pDivH)/Math.max(1,pDivH-pCut.offsetHeight)
};
init(getPos);
seePic(pSee,getPos);
seePic(pSeeS,getPos);
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
},
init=function(getPos){
var t=getPos.t*getPos.kh,
l=getPos.l*getPos.kw;
if(!clip){
clip=document.createElement('img');
clip.src=pDivImg.src;
pDiv.appendChild(clip);
}
pDivImg.style.cssText='top:-'+t+'px; left:-'+l+'px';
clip.style.cssText='top:-'+t+'px; left:-'+l+'px';
clip.style.clip='rect('+(t+getPos.t)+'px '+(l+getPos.l+getPos.w)+'px '+(t+getPos.t+getPos.h)+'px '+(l+getPos.l)+'px)';
opacity(pDivImg,50);
},
seePic=function(obj,getPos){
var img=obj.getElementsByTagName('img')[0],
k=obj.offsetWidth/getPos.w;
t=getPos.t*getPos.kh+getPos.t,
l=getPos.l*getPos.kw+getPos.l;
if(!img){
img=document.createElement('img');
img.src=pDivImg.src;
obj.appendChild(img);
}
img.style.cssText='width:'+k*pDivImg.width+'px; height:'+k*pDivImg.height+'px; position:absolute; top:-'+t*k+'px; left:-'+l*k+'px;';
document.getElementById(obj.id+'Infor').value="{'x':'"+l+"','y':'"+t+"','w':'"+getPos.w+"','h':'"+getPos.h+"','k':'"+k+"','nw':'"+(obj.offsetWidth-2)+"','nh':'"+(obj.offsetHeight-2)+"','url':'"+pDivImg.src+"'}";
},
clear=function(o){
if(!-[1,]){o.setCapture();}//学增加丢失焦点事件
document.onmouseup=function(){
if(!-[1,]){o.releaseCapture();}
document.onmousemove=null;
document.onmouseup=null;
};
return false;//webkit中去掉默认事件,使鼠标不会变成默认文本光标
};
if(!!window.ActiveXObject){//-[1,]已经不能判断ie9了
var cDiv=document.createElement('div');
cDiv.style.cssText='width:100%; height:100%; background:#fff; opacity:0; filter:alpha(opacity=0); font-size:0;';
pCut.appendChild(cDiv);
}
pCut.onmousedown=function(e){
e=e||window.event;
var oldX=e.clientX-pCut.offsetLeft,
oldY=e.clientY-pCut.offsetTop,
maxW=pDivW-pCut.offsetWidth,
maxH=pDivH-pCut.offsetHeight;
document.onmousemove=function(e){
e=e||window.event;
var newX=e.clientX-oldX,newY=e.clientY-oldY;
newX=newX<0?0:newX>maxW?maxW:newX;
newY=newY<0?0:newY>maxH?maxH:newY;
pCut.style.top=newY+'px';
pCut.style.left=newX+'px';
see();
};
clear(this);
};
pChange.onmousedown=function(e){
e=e||window.event;
var oldX=e.clientX,
oldY=e.clientY,
oldT=pCut.offsetTop+2,
oldL=pCut.offsetLeft+2,
oldW=pCut.offsetWidth,
oldH=pCut.offsetHeight,
minW=50,minH=50;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
document.onmousemove=function(e){
e=e||window.event;
var w=e.clientX-oldX+oldW;
w=w<minW?minW:w>pDivW-oldL?pDivW-oldL:w;
h=w<minH?minH:w>pDivH-oldT?pDivH-oldT:w;
w=w!=h?h:w;
pCut.style.width=w+'px';
pCut.style.height=h+'px';
if(!-[1,]&&!window.XMLHttpRequest){cDiv.style.height=h+'px';}//ie6下高度不变bug
see();
};
clear(this);
};
see();
}
})();
</script>
</body>
</html>
继续php代码
<?php
$time=time();
cutPic('Small',$time);
cutPic('Big',$time);
function cutPic($nam,$time){
$img=json_decode(str_replace("\\'",'"',$_POST['picSee'.$nam.'Infor']),true);
$old_img=imagecreatefromstring(file_get_contents($img['url']));
$new_url='images/'.$nam.'_'.getip().'_'.$time.'.jpg';
if(function_exists("imagecreatetruecolor")){
$new_img=imagecreatetruecolor($img['nw'],$img['nh']);
}else{
$new_img=imagecreate($img['nw'],$img['nh']);
}
imagecopyresampled($new_img,$old_img,0,0,$img['x'],$img['y'],$img['nw'],$img['nh'],$img['w'],$img['h']);
imagejpeg($new_img,$new_url);
imagedestroy($new_img);
echo '<img src="'.$new_url.'" /><br /><br /><br />';
}
function getip(){
if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown")){
$ip = getenv("HTTP_CLIENT_IP");
}else if(getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown")){
$ip = getenv("HTTP_X_FORWARDED_FOR");
}else if(getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown")){
$ip = getenv("REMOTE_ADDR");
}else if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown")){
$ip = $_SERVER['REMOTE_ADDR'];
}else{
$ip = "unknown";
}
return ($ip);
}
?>
继续附件上传，共勉共勉。。。
分享到：
相关推荐
PPT模板 -龙湖新员工转正答辩模板.pptx
PPT模板 -生产计划管理.pptx
生产单元数字化改造23年国赛
图表效果及代码实现讲解链接：https://blog.csdn.net/zhangjiujiu/article/details/143997013
Pythonbot高斯网格图射线投射网格图激光雷达至网格地图k-均值对象聚类矩形接头大满贯迭代最近点 (ICP) 匹配FastSLAM 1.0路径规划动态窗口方法基于网格的搜索Dijkstra 算法A* 算法D*算法D* Lite 算法位场算法基于网格的覆盖路径规划国家网格规划偏极采样车道采样概率路线图（PRM）规划快速探索随机树（RRT）回程时间*RRT* 和 reeds-shepp 路径LQR-RRT*五次多项式规划Reeds Shepp 规划基于LQR的路径规划Frenet 框架中的最佳轨迹路径追踪移动到姿势控制斯坦利控制后轮反馈控制线性二次调节器 (LQR) 速度和转向控制模型预测速度和转向控制采用 C-GMRES 的非线性模型预测控制手臂导航N关节臂对点控制带避障功能的手臂导航航空导航无人机三维轨迹跟踪火箭动力着陆双足动物倒立摆双
SQL，全称为结构化查询语言（Structured Query Language），是用于管理和操作关系型数据库的标准化语言。它广泛应用于数据插入、查询、更新和删除等操作，并且拥有超过40年的历史，证明了其在数据处理领域的核心地位。以下是对SQL综合学习基础知识及练习题考试题实测题的介绍
java面向对象 - 类与对象 在Java编程语言中，面向对象编程（OOP）是一个核心概念。它强调以对象作为程序的基本单位，并将相关的数据和功能封装在对象中。类和对象是Java OOP的两个关键组成部分。 ### 类（Class） 类是一个模板或蓝图，它定义了对象的属性和行为。我们可以将类视为对象的类型或种类。通过类，我们可以创建（实例化）具有特定属性和行为的对象。 类的组成部分通常包括： 1. **成员变量**（属性）：用于存储对象的状态或数据。 2. **方法**（行为）：定义了对象可以执行的操作或功能。 3. **构造方法**：一种特殊类型的方法，用于在创建对象时初始化其状态。 4. **块**（如静态块、实例初始化块）：用于执行类级别的初始化代码。 5. **嵌套类**：一个类可以包含其他类，这被称为嵌套或内部类。 ### 对象（Object） 对象是类的实例。它是根据类模板创建的具体实体，具有自己的状态和行为。每个对象都是其类的一个唯一实例，可以访问其类中定义的属性和方法。 创建对象的过程通常涉及以下几个步骤： 1. **声明**：指定对象的类型（即其所属的类
原生JS实现鼠标感应图片左右滚动代码.zip
随机密码生成器，支持字符、数字、字母大小写组合
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。
内容概要：本文档为一份高级数学复习试题，内容涵盖线性代数、数值分析及最优化理论等领域，主要包括矩阵范数的计算、遗传算法中的变异操作、内点法解非线性优化问题、证明矩阵有互异特征值、求解矩阵的标准形以及应用单纯形法和FR共轭梯度法解决具体的数学问题等方面。 适合人群：正在备考研究生入学考试或者准备参加各类数学竞赛的学生、对高等数学感兴趣的学习者及从事相关领域科研工作的专业人士。 使用场景及目标：用于巩固和检验个人关于矩阵论、优化方法及概率统计的知识掌握情况，帮助应试者系统地复习相关考点，提高解题技巧。 阅读建议：建议结合具体题目深入理解每一个概念及其应用方式，遇到复杂的计算或证明步骤不妨动手尝试推导一次，这样有助于加深记忆并培养灵活运用知识的能力。同时，在理解算法原理的基础上，还可以参考一些实际案例来进行练习。
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
Google Spreadsheet Python API v4Google Sheets 配合使用的简单界面。特征通过标题、关键字或URL打开电子表格。读取、写入和格式化单元格区域。共享和访问控制。批量更新。安装pip install gspread要求Python 3.8+。基本用法在 Google API 控制台中创建凭据开始使用 gspreadimport gspreadgc = gspread.service_account()# Open a sheet from a spreadsheet in one gowks = gc.open("Where is the money Lebowski?").sheet1# Update a range of cells using the top left corner addresswks.update([[1, 2], [3, 4]], "A1")# Or update a single cellwks.update_acell("B42", "it's
AICon 2024全球人工智能开发与应用大会（脱敏）PPT合集，共30份。 AI辅助编程测评与企业实践 SmartEV和AI 蔚来的思考与实践 下一代 RAG 引擎的技术挑战与实现 书生万象大模型的技术演进与应用探索 人工智能行业数据集构建及模型训练方法实践周华 全方位评测神经网络模型的基础能力 千亿参数 LLM 的训练效率优化 向量化与文档解析技术加速大模型RAG应用落地 基于大模型的缺陷静态检查 多环境下的 LLM Agent 应用与增强 大模型在华为推荐场景中的探索和应用 大模型在推荐系统中的落地实践 大模型的异构计算和加速 大模型辅助需求代码开发 大语言模型在法律领域的应用探索 大语言模型在计算机视觉领域的应用 大语言模型的幻觉检测 小米大模型端侧部署落地探索 快手可图大模型的技术演进与应用探索 提升大模型知识密度，做高效的终端智能 电商大模型及搜索应用实践 百度大模型 原生安全构建之路 硅基流动高性能低成本的大模型推理云实践 语言模型驱动的软件工具思考：可解释与可溯源 长文本大模型推理实践：以 KVCache 为中心的分离式推理架构 阿里云 AI 搜索 RAG 大模型优
子弹打穿金属后留下弹痕flash动画.zip
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
原生js竖直动画手风琴下拉菜单代码.zip
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
Centos6.x通过RPM包升级OpenSSH9.7最新版 升级有风险,前务必做好快照，以免升级后出现异常影响业务
营销策划 -阿道夫洗护品牌新品小红书新品营销方案.pptx