php 裁剪图片

需求:给出图片地址,打开,裁剪自己想要的大小,保存。

https://scaleflex.github.io/filerobot-image-editor/
很强大的图片在线编辑,编辑后可以上传云存储,也可以下载。不过不是我要找的。

https://www.mycodes.net/48/9434.htm
简单的Ajax+PHP图片裁切预览简单例子,只能固定裁剪100*100大小的图片。上面链接失效可以在本站下载:image_cut

载下来,改了改,实现拖动改变矩形框大小,裁剪,然后直接保存。

实现拖动改变矩形框大小代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.box{
width:200px;
height:200px;
border:1px solid gray;
position:absolute;
left:200px;
top:100px;
}
.upleftbtn,.uprightbtn,.downleftbtn,.downrightbtn{
width:10px;
height:10px;
border:1px solid steelblue;
position: absolute;
z-index:5;
background: whitesmoke;
}
.upleftbtn{
top:-5px;
left:-5px;
cursor:nw-resize;
}
.uprightbtn{
top:-5px;
right:-5px;
cursor:ne-resize;
}
.downleftbtn{
left:-5px;
bottom:-5px;
cursor:sw-resize;
}
.downrightbtn{
right:-5px;
bottom:-5px;
cursor:se-resize;
}
</style>
<script>
var obj = null;//当前操作对象
var box = null;//要处理的对象;
//保留上次的x,y位置
var clickX = 0;
var clickY = 0;

//鼠标点击
var onDragDown = function(e,type){
e = e ||window.event;
var location = {
x:e.x || e.clientX,
y:e.y || e.clientY
}
clickX = e.x || e.clientX;
clickY = e.y || e.clientY;
obj = this;
obj.operateType = type;
box = document.getElementById("box");
return false;
}
var onBoxDragDown = function(e,type){
e = e ||window.event;
var location = {
x:e.x || e.clientX,
y:e.y || e.clientY
}
clickX = e.x || e.clientX;
clickY = e.y || e.clientY;
obj = this;
obj.operateType = type;
box = document.getElementById("box");
return false;
}
var onUpleftbtn = function(e){
e.stopPropagation();
onDragDown(e, "nw");
}
var onUpRightbtn = function(e){
e.stopPropagation();
onDragDown(e, "ne");
}
var onDownleftbtn = function(e){
e.stopPropagation();
onDragDown(e, "sw");
}
var onDownRightbtn = function(e){
e.stopPropagation();
onDragDown(e, "se");
}
var onBoxDown = function(e){
onBoxDragDown(e, "move");
}

var move = function(type,location,tarobj){
switch(type)
{
case 'n':
var add_length = clickY - location.y;
clickY = location.y;
var length = parseInt(tarobj.style.height) + add_length;
tarobj.style.height = length + "px";
tarobj.style.top = clickY + "px";
break;
case 's':
var add_length = clickY - location.y;
clickY = location.y;
var length = parseInt(tarobj.style.height) - add_length;
tarobj.style.height = length + "px";
break;
case 'w':
var add_length = clickX - location.x;
clickX = location.x;
var length = parseInt(tarobj.style.width) + add_length;
tarobj.style.width = length + "px";
tarobj.style.left = clickX + "px";
break;
case 'e':
var add_length = clickX - location.x;
clickX = location.x;
var length = parseInt(tarobj.style.width) - add_length;
tarobj.style.width = length + "px";
break;
case 'move':
var add_ylength = clickY - location.y;
clickY = location.y;
var length = parseInt(tarobj.style.top) - add_ylength;
// tarobj.style.height = length + "px";
tarobj.style.top = length + "px";
var add_xlength = clickX - location.x;
clickX = location.x;
var xlength = parseInt(tarobj.style.left) - add_xlength;
// tarobj.style.width = length + "px";
tarobj.style.left = xlength + "px";
break;
}
}

window.onload = function(e){
document.getElementById("upleftbtn").onmousedown = onUpleftbtn;
document.getElementById("uprightbtn").onmousedown = onUpRightbtn;
document.getElementById("downleftbtn").onmousedown = onDownleftbtn;
document.getElementById("downrightbtn").onmousedown = onDownRightbtn;

document.getElementById("box").onmousedown = onBoxDown;

document.onmousemove = function(e){
if(obj)
{
e = e || window.event;
var location = {
x:e.x || e.clientX,
y:e.y || e.clientY
}
switch(obj.operateType)
{
case "nw":
move('n',location,box);
move('w',location,box);
break;
case "ne":
move('n',location,box);
move('e',location,box);
break;
case "sw":
move('s',location,box);
move('w',location,box);
break;
case "se":
move('s',location,box);
move('e',location,box);
break;
case "move":
move('move',location,box);
break;
}

}
}
document.onmouseup = function(){
document.body.style.cursor = "auto";
obj = null;
}
}

</script>
</head>
<body>
<div class="box" id="box" style="width:200px; height:200px;left:200px; top:100px;">
<div class="upleftbtn" id="upleftbtn"></div>
<div class="uprightbtn" id="uprightbtn"></div>
<div class="downleftbtn" id="downleftbtn"></div>
<div class="downrightbtn" id="downrightbtn"></div>
</div>
</body>
</html>

 

留下评论