带有Javascript的PHP图像裁剪器

Question

我正在创建图像裁剪器。 我有以下在PHP中声明。这是即将裁剪的图像。

$src_name = 'image.jpg'; 

宣布这之后，我有一个简单的JavaScript图像切换器。

<script language="javascript" type="text/javascript"> 
function changebg(my) 
{ 
document.getElementById("cropframe").style.backgroundImage ='url('+ my.src +')'; 
document.getElementById("imglayer").style.backgroundImage ='url('+ my.src +')'; 
} 
</script> 
<img src="imagename1" width="50" height="50" onclick="changebg(this)" > 
<img src="imagename2" width="50" height="50" onclick="changebg(this)" > 
<div id="cropframe" style="background-image: url('<?=$src_original ?>')"></div> 
<div id="imglayer" style="width: 100%; height: 500px; padding: 1px; background-position: top left; background-image: url('<?=$src_original ?>')"> 

然后我有图像裁剪发生的形式。

<form name="crop" method="post" action="crop-action.php"> 
<p><button onclick="cwcrop_handler.doCrop()">Crop</button></p> 

我可以改变将要裁剪的图像吗？我知道PHP发生在服务器端。但是，我可以将新的图像名称传递到“crop-action.php”中，以便剪切正确的图像吗？ 谢谢！

Answer 1

如果我的理解对不对，你将会使作物服务器端使用PHP，只有采取从通过JavaScript用户输入...

我不知道你怎么缩进用户进行裁剪，但一个简单的解决方案是在表单中添加一个后置变量。你可以简单地做到这一点的东西像这个...

HTML：

<input id="fileIdentifier" name="fileIdentifier" type="hidden" value="identity"> 

然后取出用JavaScript输入，当用户开始编辑，并更改输入元素的值。 JS：

var fileID = doument.getElementByID("fileIdentifier"); 
fileID.value = imageIdentifierValue;