[求解] JavaScript怎样实现对图片的剪裁？

法号肾虚 2006-03-28 10:39:15

方便用户可以通过IE在线剪裁图片

...全文

146 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

ice_berg16 2006-03-28

打赏
举报

单纯用JS无法实现。
ASP可以使用图像修改控件
PHP有GD库使用

ice_berg16 2006-03-28

打赏
举报

单纯用JS无法实现。
ASP可以使用图像修改控件
PHP有GD库使用

hbhbhbhbhb1021 2006-03-28

打赏
举报

ice_berg16的意思我明白了，我上面的代码是并没有实现真正意义对图片的裁剪

ice_berg16 2006-03-28

打赏
举报

楼上几位给出的只是显示部分图片，并不是对图片进行真正的裁剪，
不通过控件和后台程序，我觉得无法实现。
不知道楼主要的是哪种

喜受写代码的小强 2006-03-28

打赏
举报

可以用DIV来实现

clare2003 2006-03-28

打赏
举报

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD>
<TITLE>clip</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">

<LINK REL="stylesheet" HREF="">
<LINK REL="stylesheet" TYPE="text/css" HREF="ms-help://Hx/HxRuntime/HxLink.css"><STYLE TYPE="text/css">
PRE.clsCode { font-size:110%; }
PRE.clsSyntax { font-size:100%; }
TD DIV.clsBeta { display:none;}
MSHelp\:link {
color:#0000ff;
text-decoration:underline;
cursor:hand;
hoverColor:#3366ff;
filterString: ;}
</STYLE>
</HEAD>




<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF" LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body">

<IMG ID="sphere" SRC="1.jpg" STYLE="position:absolute;top:0cm;left:0cm;" height="80" width="80" border="0" alt="sphere">

<BUTTON STYLE="position:absolute;top:120px;left:5px" onclick="sphere.style.clip='rect(0.2cm 0.6cm 1cm 0.1cm)'">Clip Image</BUTTON>
<BUTTON STYLE="position:absolute;top:120px;left:120px" onclick="sphere.style.clip='rect(auto)'">Restore Image</BUTTON>

<DIV Style="position:absolute;top:200px">
<CENTER>
<HR>
[To view source code, right-click.]
</CENTER>
</DIV>

<DIV STYLE="position:absolute;top:200">

<BR><BR><BR>


</DIV>
</BLOCKQUOTE>
</BODY>
</HTML>

hbhbhbhbhb1021 2006-03-28

打赏
举报

这个还是可以实现的
上<input name=top>
右<input name=right>
下<input name=bottom>
左<input name=left>
<input name=button1 type=button value="裁剪" onclick=show()>
<br>
<img id="img1" src="http://zi.csdn.net/huazong760-90.jpg" style="position:absolute;">
<script language=javascript>
function show()
{
var obj=document.getElementById("img1")
obj.style.clip="rect("+document.getElementById("top").value+"px " + document.getElementById("right").value+"px " + document.getElementById("bottom").value+"px " + document.getElementById("left").value +"px)";
}
</script>