裁剪确认jquery

时间:2014-04-01 17:55:54

标签: javascript php jquery

我想创建裁剪系统php和jquery。我做了一些研究并学到了一些东西。但我现在有一个问题。在以下代码中有确认。我不想遇到这样的警告。系统的工作方式如下:当您应用该过程来选择图像的所需区域时,以下警告结果为((您想保存图像..!))但我不想要这样的警告。你能帮我解决这个问题。 http://goo.gl/zXhvGG

function getSizes(im, obj) {
    var x_axis = obj.x1;
    var x2_axis = obj.x2;
    var y_axis = obj.y1;
    var y2_axis = obj.y2;
    var thumb_width = obj.width;
    var thumb_height = obj.height;
    if (thumb_width > 0) {
        if (confirm("Do you want to save image..!")) {
            $.ajax({
                type: "GET",
                url: "ajax_image.php?t=ajax&img=" + $("#image_name").val() + "&w=" +
                    thumb_width + "&h=" + thumb_height + "&x1=" + x_axis + "&y1=" + y_axis,
                cache: false,
                success: function (rsponse) {
                    $("#cropimage").hide();
                    $("#thumbs").html("");
                    $("#thumbs").html("<img src='uploads/" + rsponse + "' />");
                }
            });
        }
    } else
        alert("Please select portion..!");
}
$(document).ready(function () {
    $('img#photo').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: getSizes
    });
});

PHP

<?php

    $valid_formats = array("jpg", "png", "gif", "bmp");
    if(isset($_POST['submit']))
        {
            $name = $_FILES['photoimg']['name'];
            $size = $_FILES['photoimg']['size'];

            if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name);
                    if(in_array($ext,$valid_formats) && $size<(1024*1024))
                        {
                            $actual_image_name = time().substr($txt, 5).".".$ext;
                            $tmp = $_FILES['photoimg']['tmp_name'];
                            if(move_uploaded_file($tmp, $path.$actual_image_name))
                                {
                                mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
                                    $image="<h1>Please drag on the image</h1><img src='uploads/".$actual_image_name."' id=\"photo\" style='max-width:500px' >";

                                }
                            else
                                echo "failed";
                        }
                    else
                        echo "Invalid file formats..!";                 
                }
            else
                echo "Please select image..!";
        }
?>

HTML

<div style="margin:0 auto; width:600px">
<?php echo $image; ?>
<div id="thumbs" style="padding:5px; width:600px"></div>
<div style="width:600px">

<form id="cropimage" method="post" enctype="multipart/form-data">
    Upload your image <input type="file" name="photoimg" id="photoimg" />
    <input type="hidden" name="image_name" id="image_name" value="<?php echo($actual_image_name)?>" />
    <input type="submit" name="submit" value="Submit" />
</form>

</div>
</div>

Ajax.php

<?php
include('db.php');
session_start();
$session_id='1'; // Session_id
$t_width = 100; // Maximum thumbnail width
$t_height = 100;    // Maximum thumbnail height
$new_name = "small".$session_id.".jpg"; // Thumbnail image name
$path = "uploads/";
if(isset($_GET['t']) and $_GET['t'] == "ajax")
    {
        extract($_GET);
        $ratio = ($t_width/$w); 
        $nw = ceil($w * $ratio);
        $nh = ceil($h * $ratio);
        $nimg = imagecreatetruecolor($nw,$nh);
        $im_src = imagecreatefromjpeg($path.$img);
        imagecopyresampled($nimg,$im_src,0,0,$x1,$y1,$nw,$nh,$w,$h);
        imagejpeg($nimg,$path.$new_name,90);
        mysql_query("UPDATE users SET profile_image_small='$new_name' WHERE uid='$session_id'");
        echo $new_name."?".time();
        exit;
    }

    ?>

1 个答案:

答案 0 :(得分:0)

您需要从js代码中删除确认。因此,请改用此代码

 <script type="text/javascript">
     function getSizes(im, obj) {
        var x_axis = obj.x1;
        var x2_axis = obj.x2;
        var y_axis = obj.y1;
        var y2_axis = obj.y2;
        var thumb_width = obj.width;
        var thumb_height = obj.height;
        if (thumb_width > 0) {
            $.ajax({
                type: "GET",
                url: "ajax_image.php?t=ajax&img=" + $("#image_name").val() + "&w=" + thumb_width + "&h=" + thumb_height + "&x1=" + x_axis + "&y1=" + y_axis,
                cache: false,
                success: function (rsponse) {
                    $("#cropimage").hide();
                    $("#thumbs").html("");
                    $("#thumbs").html("<img src='uploads/" + rsponse + "' />");
                }
            });
        }
    }
    $(document).ready(function () {
        $('img#photo').imgAreaSelect({
            aspectRatio: '1:1',
            onSelectEnd: getSizes
        });
    });
      </script>