jquery imgareaselect不工作

时间：2013-03-27 03:39:41

标签： php jquery mysql

imgareaselect不允许选择。编辑框中的按钮就像它们不起作用一样。我不确定它是否没有正确接收我的字符串。我确信它与我的java代码有关，但无法确定它。它也可能是我将代码传递给它的方式。

打开编辑框，图片和选择工作正常。

我不想用代码来压倒我，但我认为你必须看看整个事情。

这是编辑页面：

<div>
                    <a href="javascript:history.back()" style="color:#333">Back to photos</a>&nbsp;&nbsp;
                    <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();
});
});

非常感谢任何帮助。

1 个答案:

答案 0 :(得分：0)

2013年3月28日更新 上面的帖子没有说明我遇到的问题。我发现纯粹的意外是什么问题。它正在寻找base64部分中的完整URL。出于某种原因，当它查找照片时，需要查看完整的URL。上传的照片只是数据库中照片的直接链接 - 您不会看到，因为我没有包含它。无论如何，我更改了上传页面以上传到数据库的完整链接。现在我可以访问选择。

相关问题
最新问题