0
imgareaselect不允許選擇。編輯框中的按鈕就像是不起作用的。我不確定它是否沒有正確接收我的字符串。我相信它與我的java代碼有關，但不能確定它。這也可能是我如何將代碼傳遞給它。jquery imgareaselect不工作
編輯框打開圖片和選擇作品。
我不想用代碼淹沒，但我認爲你必須看看整個事情。
這是編輯頁面：
<div>
<a href="javascript:history.back()" style="color:#333">Back to photos</a>
<a href="javascript: void(0);" id="editorLoader" style="color:#333">Edit Photo</a>
<div id="editorDialog"></div>
<script type="text/javascript">
$(document).ready(function() {
var editorDialogOptions = {
title: "<?php echo "Image Editor"; ?>",
modal: true,
autoOpen: false,
height: 475,
width: 825,
open: function() {
$("#editorDialog").load('<?php echo "editor.php?ID=".$pic['photo_id']; ?>');
},
close: function(event, ui) {
$('#imgSource').imgAreaSelect({ remove: true });
$(this).dialog('destroy');
}
};
$('#editorLoader').click(function() {
$("#editorDialog").dialog(editorDialogOptions).dialog('open');
});
});
</script>
</div>
下面是編輯：
<?php
$sql = mysql_query("SELECT * FROM `employee_photos` WHERE photo_id = $ID") or die(mysql_error());
$urls = mysql_fetch_array($sql);
$baseUrl = "http://" . $_SERVER['HTTP_HOST'];
if (isset($_SERVER['SCRIPT_NAME']) && ($pos = strripos($baseUrl, basename($_SERVER['SCRIPT_NAME']))) !== false) {
$baseUrl = substr($baseUrl, 0, $pos);
}
$piclink = $urls['piclink'];
$picurl = $urls['picurl'];
$data = array(
'Thumbnail' => $picurl,
'Original' => $piclink,
);
$dataString = rawurlencode(base64_encode(json_encode($data)));
?>
<div class="editorbox">
<div class="grid_7 alpha">
<div class="t_a_line">
<h2>Image Details</h2>
</div>
<div>
<div class="clearfix" style="padding-top: 10px">
<ul style="list-style-type: none">
<li style="float: left; padding-right: 5px">
File Size
<select name="imageSize" id="imageSize">
<?php if ($data != null) { ?>
<?php foreach ($data as $size => $source) { ?>
<option value="<?php echo $size; ?>"><?php echo $size; ?></option>
<?php } ?>
<?php } ?>
</select>
</li>
</ul>
</div>
</div>
<div class="grid_7 alpha t_a_top">
<input type="button" class="image_crop" name="cropButton" id="cropButton" value="Crop" disabled="disabled" />
<input type="button" name="rotateLeftButton" id="rotateLeftButton" value="Rotate Left" />
<input type="button" name="rotateRightButton" id="rotateRightButton" value="Rotate Right" />
<input type="button" name="flipVerticalButton" id="flipVerticalButton" value="Flip Verticle" />
<input type="button" name="flipHorizontalButton" id="flipHorizontalButton" value="Flip Horizontal" />
</div>
<div class="clearfix t_a_bottom"></div>
<div>
<div id="sourceContainer" style="width: 400px; border: 1px solid #CCCCCC; overflow: auto; text-align: center;">
<img id="imgSource" src="" style="max-width: 400px" />
</div>
</div>
</div>
<div class="grid_2 omega">
<div class="grid_2 t_g_bottom">
<div class="t_a_line">
<h2><?php echo 'Crop Image'; ?></h2>
</div>
<div>
<div class="grid_2 alpha clearfix t_a_top">
Selection
<input type="text" name="imageWidth" id="imageWidth" style="width: 40px" /> :
<input type="text" name="imageHeight" id="imageHeight" style="width: 40px;" />
</div>
</div>
</div>
<div class="clearfix t_a_bottom"></div>
<div class="grid_2 t_g_bottom">
<div class="t_a_line">
<h2>Settings</h2>
</div>
<div>
<div class="grid_2 alpha clearfix t_a_bottom" style="padding-top: 10px">
<label>Apply changes to:</label><br />
<select name="sizeSelect" id="sizeSelect">
<option value="">Current size</option>
<?php if ($data != null) { ?>
<?php foreach ($data as $size => $source) { ?>
<option value="<?php echo $source; ?>|<?php echo $size; ?>"><?php echo $size; ?></option>
<?php } ?>
<?php } ?>
</select>
<input type="hidden" name="fileId" id="fileId" value="<?php echo $ID; ?>" />
</div>
</div>
</div>
這裏是JavaScript編輯者：
var baseUrl = '<?php echo $baseUrl ?>';
var data = $.evalJSON(base64_decode(rawurldecode('<?php echo $dataString; ?>')));
var options = {
fadeSpeed: 400,
handles: true,
onSelectChange: onSelectChange,
instance: true
};
var imgSource = $('#imgSource');
var images = data;
var editor = null;
function onSelectChange(img, selection) {
if (selection.width != 0 || selection.height != 0) {
/**
* Enable image crop button
*/
$('.image_crop').unbind('click').bind('click', function() {
imageAction('crop', null);
}).removeAttr('disabled');
} else {
/**
* Disable image crop button
*/
$('.image_crop').attr('disabled', 'disabled').unbind('click');
}
$('#imageWidth').val(selection.width);
$('#imageHeight').val(selection.height);
var divHeight = 40;
var top = selection.height + 5;
var height = $('#imgSource').height();
if ((top + selection.y1) > height - divHeight) {
top = - divHeight;
}
$('.imgareaselect-selection').parent().css('overflow', '');
if ($('#imageCropForm').html() == undefined) {
$('.imgareaselect-selection').parent().css('overflow', '');
$('.imgareaselect-selection').after('<div id="imageCropForm" style="position: relative; left: 0; top: ' + top + 'px"><input type="button" class="image_crop" value="Crop" /></div>');
} else {
$('#imageCropForm').css('top', top + 'px');
}
};
function imageAction(action, mode) {
var dataPost = null;
switch (action) {
case 'rotate':
var degrees = 450;
if (mode == 'left') {
degrees = 270;
}
dataPost = { degrees: degrees };
break;
case 'flip':
dataPost = { mode: mode }
break;
case 'crop':
if (editor == undefined || editor == null) {
return false;
}
var selection = editor.getSelection();
dataPost = { x1: selection.x1, y1: selection.y1, width: selection.width, height: selection.height };
$('#cropButton').attr('disabled', 'disabled').unbind('click');
break;
default:
break;
}
if (dataPost != null) {
dataPost.source = $(imgSource).attr('src');
dataPost.action = action;
dataPost.des = $('#sizeSelect').val();
dataPost.file_id = $('#fileId').val();
dataPost.max_width = 400;
dataPost.load = 'edit';
editor = $(imgSource).imgAreaSelect({ remove: true });
$.ajaxq('image_load', {
type: 'POST',
url: '<?php echo "http://" . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>',
data: dataPost,
success: function(response) {
if (response != 'RESULT_ERROR') {
$(imgSource).hide();
response = $.evalJSON(response);
if (response.image_url != undefined) {
$(imgSource).attr('src', response.image_url + '?rand=' + Math.random()).fadeIn("slow");
editor = $(imgSource).imgAreaSelect(options);
$(imgSource).fadeIn('slow');
}
if (response.type != undefined && response.type != null) {
$('#imageSize option').each(function() {
$(this).removeAttr('selected');
if (response.type == this.value) {
$(this).attr('selected', 'selected');
images[response.type] = response.image_url;
$('#imageSize').change();
return;
}
});
}
}
}
});
}
};
$(document).ready(function() {
$('#imageSize').bind('change', function() {
var size = this.value;
if (images[size] != undefined) {
var src = images[size];
$(imgSource).hide().attr('src', src + '?rand=' + Math.random()).fadeIn('slow');
editor = $(imgSource).imgAreaSelect({ remove: true });
$('.image_crop').unbind('click');
$('#rotateLeftButton').unbind('click');
$('#rotateRightButton').unbind('click');
$('#flipVerticalButton').unbind('click');
$('#flipHorizontalButton').unbind('click');
if (src.indexOf(baseUrl) >= 0) {
editor = $(imgSource).imgAreaSelect(options);
$('#rotateLeftButton').bind('click', function() {
imageAction('rotate', 'left');
}).removeAttr('disabled');
$('#rotateRightButton').bind('click', function() {
imageAction('rotate', 'right');
}).removeAttr('disabled');
$('#flipVerticalButton').bind('click', function() {
imageAction('flip', 'vertical');
}).removeAttr('disabled');
$('#flipHorizontalButton').bind('click', function() {
imageAction('flip', 'horizontal');
}).removeAttr('disabled');
} else {
$('#rotateLeftButton').unbind().attr('disabled', 'disabled');
$('#rotateRightButton').unbind().attr('disabled', 'disabled');
$('#flipVerticalButton').unbind().attr('disabled', 'disabled');
$('#flipHorizontalButton').unbind().attr('disabled', 'disabled');
$('#imageWidth').unbind().attr('disabled', 'disabled');
$('#imageHeight').unbind().attr('disabled', 'disabled');
}
}
});
$('#imageSize option:last').attr('selected', 'selected').change();
$('#imageWidth').bind('keyup', function() {
var selection = editor.getSelection();
var x1 = selection.x1;
var y1 = selection.y1;
var x2 = x1 + parseInt($(this).val());
var y2 = y1 + parseInt($('#imageHeight').val());
editor.setSelection(x1, y1, x2, y2, true);
editor.update();
});
$('#imageHeight').bind('keyup', function() {
var selection = editor.getSelection();
var x1 = selection.x1;
var y1 = selection.y1;
var x2 = x1 + parseInt($('#imageWidth').val());
var y2 = y1 + parseInt($(this).val());
editor.setSelection(x1, y1, x2, y2, true);
editor.update();
});
});
任何幫助是極大的讚賞。