帶有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;