带有Javascript的PHP图像裁剪器

Question

I am creating an image cropper. I have the following declared in PHP. This is the image that is going to be cropped.

$src_name = 'image.jpg';

After declaring this, I have a simple javascript image switcher.

<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 ?>')">

Then I have the form where the cropping of the image takes place.

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

Is it possible for me to change the image that is going to be cropped? I understand that PHP takes place server side. But can I have the new imagename passed into the "crop-action.php" so the correct image is cropped? Thank you!

Answer 1

If i understand right you will make the crop server-side with php, and only take input from the user via javascript...

I'm not sure how you indent the user to make the crop, but a simple solution is to add a post-variable to the form. You could simply do that with something like this...

HTML:

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

Then fetch the input with javascript when the user start editing, and change the value of the input element. JS:

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