php+js在线剪切图片，客户端的鼠标画框部分目前谷歌浏览器测试基本通过，其它未通过。js代码还有待修改。
<?php /*Created By RexLee
**PHP学习 2012-7-21 上午2:13:59
*/
$pic="pic/pic1.jpg";
$old_img=imagecreatefromjpeg($pic);
$width=$_GET["width"];
$height=$_GET["height"];
$c_pos_x=$_GET["c_pos_x"];
$c_pos_y=$_GET["c_pos_y"];
// $c_width=$_GET["c_width"];
// $c_height=$_GET["c_height"];
$img=imagecreatetruecolor($width, $height);
imagecopy($img, $old_img, 0, 0, $c_pos_x, $c_pos_y, $width, $height);
imagejpeg($img);
header("content-type:image/jpeg");
?>
2. [文件] cut.html
html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<meta><title>Cut My Picture</title><style>
#pic {
position: absolute;
left: 520px;
top: 11px;
width: 318px;
height: 449px;
z-index: 1;
}
#msg {
position: absolute;
left: 339px;
top: 106px;
width: 136px;
height: 151px;
z-index: 2;
text-align: center;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 24px;
}
</style><p>
@@##@@
</p>
<p>left BEFORE<br>
right AFTER
</p>
<br>
x点<input><br>
y点<input><br>
宽度<input><br>
高度<input><input><p>
</p>
<script>
function cut(){
var c_pos_x=document.getElementsByName("c_pos_x")[0].value;
var c_pos_y=document.getElementsByName("c_pos_y")[0].value;
var width=document.getElementsByName("width")[0].value;
var height=document.getElementsByName("height")[0].value;
document.getElementById("pic").innerHTML='@@##@@';
}
</script><script></script>
3. [文件] drawbox.js
// JavaScript Document画矩形框 2012-7-21 上午5:39:23
(function(){
document.getElementsByTagName("img")[0].draggable=false;
var w=document.getElementsByTagName("img")[0].width;
var h=document.getElementsByTagName("img")[0].height;
document.getElementsByTagName("p")[0].style.left="10px";
document.getElementsByTagName("p")[0].style.top="10px";
document.getElementsByTagName("p")[0].style.width=w+"px";
document.getElementsByTagName("p")[0].style.height=h+"px"
document.getElementsByTagName("img")[0].onmouseover=function(){
//alert(event.clientX);
this.onmousedown=function(){
//alert("hi");
//get position
var x=event.clientX;
var y=event.clientY;
//alert(x+" "+y);
//Create Div Mask
(function(){
var p0 = document.createElement("p");// 定义新的元素节点变量
var body0 = document.getElementsByTagName("body")[0];
p0.id="mask"//赋予新建元素的属性
p0.style.left=x+"px";
p0.style.top=y+"px";
p0.style.boder="#0099FF solid 1px";
p0.style.zIndex=100;
p0.style.backgroundColor="#CC0000";
p0.style.position="absolute";
body0.appendChild(p0);// 把新建的节点 添加到boxcon里
})();
x_old=event.clientX;
y_old=event.clientY;
this.onmousemove=function(){
//Redraw Mask
var x_new=event.clientX;
var y_new=event.clientY;
document.getElementById("mask").style.width;
document.getElementById("mask").style.height;
var dx=((x_new-x_old)<p style='margin: 0px; padding: 0px; font-size: 16px; color: rgb(51, 51, 51); font-family: "helvetica neue", "hiragino sans gb", "ST HeiTi", "microsoft yahei", 微软雅黑, tahoma, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);'>4. [图片] 截图20120721053103.png</p><p style='margin: 0px; padding: 0px; font-size: 16px; color: rgb(51, 51, 51); font-family: "helvetica neue", "hiragino sans gb", "ST HeiTi", "microsoft yahei", 微软雅黑, tahoma, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);'><img></p><p> 以上就是php+js在线剪切图片的内容，更多相关内容请关注PHP中文网（www.php.cn）！<br></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill11164" title="jm-jsjkxyjs02-zlm-405"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e352aa140.jpg" alt="jm-jsjkxyjs02-zlm-405" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill11164" title="jm-jsjkxyjs02-zlm-405" class="overflowclass">jm-jsjkxyjs02-zlm-405</a>
<p class="overflowclass">使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景：
(1) 暂存更改时需要提交信息；
(2) 审查 diff 时希望获得结构化摘要；
(3) 编写 PR 描述或变更日志（changelog）条目；
(4) 用户明确要求“为本次更改编写提交信息”。
该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。</p>
</div>
<a rel="nofollow" href="/xiazai/skill11164" title="jm-jsjkxyjs02-zlm-405" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div><p style="max-width:90%"helvetica neue", "hiragino sans gb", "ST HeiTi", "microsoft yahei", 微软雅黑, tahoma, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);'><br></p>
<img><img src="https://img.php.cn//upload/image/701/704/721/1487927695738024.png?x-oss-process=image/resize,p_40" title="1487927695738024.png" alt="1189.png">
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
