DEVHIDE
Login Or Sign up

Getting Error while Crop Image,Save Image

1.3k Views Asked by At

Please check below code,I am using jquery with PHP code.I do not have that much knowledge about PHP,so Please get me out of here.I need PHP pages and html page to be separated. Here is my popup.html. Where I have done wrong code,Please advise me

    <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Popup</title>
<link rel="stylesheet" href="css/imgareaselect-animated.css" type="text/css" />
<link rel="stylesheet" href="css/imgareaselect-default.css" type="text/css" />
<link rel="stylesheet" href="css/imgareaselect-deprecated.css" type="text/css" />
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.imgareaselect.pack.js"></script>
<script src="jquery.imgareaselect.min.js"></script>
<script src="jquery.imgareaselect.js"></script>
</head>
<body>
<form id="cropimage" method="post" enctype="multipart/form-data">
  <input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
  <input type="submit" value="upload" class="uploadphoto"/>
  <div id="popup_box">
  <!-- OUR PopupBox DIV--> 
  <a id="popupBoxClose">close</a>
  <div id="popup_box1" style="margin:0 auto; width:600px">
  <div id="thumbs" style="padding:5px; width:600px"></div>
  <div style="width:600px">
  <input type="hidden" name="image_name" id="image_name" value=""  />
  <input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>
<div id="container"> <!-- Main Page --> 
</div>
<script type="text/javascript">
$(document).ready( function() {
$(".uploadphoto").click(function() {
    if(document.getElementById('files').files.length == 0){
      alert('Select an Image first');
      return false;}
     // }else {
         // When upload button is pressed, load the Popupbox First
       loadPopupBox();
           //   }
        $('#popupBoxClose').click( function() {           
            unloadPopupBox();
            $('.imgareaselect-outer').css('display','none');
            $('.imgareaselect-selection').css('display','none');
            $('.imgareaselect-border1,.imgareaselect-border2,.imgareaselect-border3,.imgareaselect-border4,.imgareaselect-handle').css('display','none');
            document.getElementById('files').value="";
        });

        $('#container').click( function() {
            unloadPopupBox();
        });

        function unloadPopupBox() {    // TO Unload the Popupbox
            $('#popup_box').fadeOut("slow");
            $("#container").css({ // this is just for style       
                "opacity": "1" 
            });
        }   
        function loadPopupBox() {    // To Load the Popupbox
            $('#popup_box').fadeIn("slow");
            $("#container").css({ // this is just for style
                "opacity": "1.5" 
            });        
        }  
    });

});
</script> 
<script type="text/javascript">
$(document).ready(function() {      
//$('.FieldRequired').attr('id','files');
// set up variables
var reader = new FileReader(),
    i=0,
    numFiles = 0,
    imageFiles;

// use the FileReader to read image i
function readFile() {
    reader.readAsDataURL(imageFiles[i])
}
// define function to be run when the File
// reader has finished reading the file
reader.onloadend = function(e) {

    // make an image and append it to the div
    var image = $('<img>').attr('src', e.target.result);
    var imgdiv = $('#popup_box');
    $(imgdiv).append(image);
    $('#popup_box img').attr('id','img1');

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#img1').imgAreaSelect({
        aspectRatio: '1:1',
        onSelectEnd: getSizes
    });
});

 // if there are more files run the file reader again
    if (i < numFiles) {
        i++;
        readFile();
    }
};
$(".uploadphoto").click(function() {

    imageFiles = document.getElementById('files').files
    // get the number of files
    numFiles = imageFiles.length;
    readFile();           

});


});
$('#popup_box1').load('save_image.php');
</script>
<style type="text/css">
/* popup_box DIV-Styles*/
#popup_box {
    display:none; /* Hide the DIV */
    position:fixed;
    _position:absolute; /* hack for internet explorer 6 */
    height:500px;
    width:500px;
    background:#FFFFFF;
    left: 30%;
    top: 20%;
    z-index:100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
    margin-left: 15px;
    /* additional features, can be omitted */
    border:2px solid #ff0000;
    padding:15px;
    font-size:15px;
    -moz-box-shadow: 0 0 5px #ff0000;
    -webkit-box-shadow: 0 0 5px #ff0000;
    box-shadow: 0 0 5px #ff0000;
}
#popup_box img {
 height: 476px;
    margin: 3px;
    width: 494px;
}
#container {
    background: #d2d2d2; /*Sample*/
    width:100%;
    height:100%;
}
a {
    cursor: pointer;
    text-decoration:none;
}
/* This is for the positioning of the Close Link */
#popupBoxClose {
    background: url("close.png") no-repeat scroll 0 0 transparent;
    color: transparent;
    font-size: 20px;
    line-height: 26px;
    position: absolute;
    right: -28px;
    top: -14px;
}
</style>
</body>

Here is my Save Image.php

    <?php
//include('db.php');
session_start();
$session_id='1'; //$session id

$path = "uploads/";
?>
<?php

    $valid_formats = array("jpg", "png", "gif", "bmp");
    if(isset($_REQUEST['submit']))
        {
            $name = $_FILES['files']['name'];
            $size = $_FILES['files']['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['files']['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..!";
        }
?>

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

Getting error "NetworkError: 404 Not Found - http://abc.com/CropImage-PHP/uploads/%3Cbr%20/%3E%3Cb%3EWarning%3C/b%3E:%20%20imagecreatefromjpeg(uploads/undefined)%20%5B%3Ca%20href="

Getting error while creating uploads folder.

php javascript jquery imageareaselect
Original Q&A
2

There are 2 best solutions below

1
Sakib On BEST ANSWER

PHP has bult-in GD Librery

I don,t know if is it that necessary for u to create a js function to crop the image. There are many functions available for manipulating images. So no need to do extra job.

You can also check that link here https://gist.github.com/philBrown/880506

Check their functions. You can easily get your job done with the help of the image manipulation class. Sample use of this class ... 

$myImage = new ImageManipulator($_FILES['form_field_name']['tmp_name']);

Then you can resize image by this one line code...

$myImage->resample(480, 320); // resize to 480x320

similarly you can crop it, enlarge it.. for cropping... (set value for variables)

$myImage->crop($x1_axis, $y1_axis, $x2_axis, $y2_axis);

for save in a destination....

$myImage->save('/path/to/uploadfolder/image.jpg', IMAGETYPE_JPEG);

I think it will be pretty easy for you to handle image manipulation by this class. I don't know how useful it will be for you but it is a nice class for image manipulation.

And your Html still have inappropriate tag endings.

it should be... 

<form id="cropimage" method="post" enctype="multipart/form-data">
  <input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
  <input type="submit" value="upload" class="uploadphoto"/>
  <div id="popup_box">
  <!-- OUR PopupBox DIV--> 
  <a id="popupBoxClose">close</a>
  <div id="popup_box1" style="margin:0 auto; width:600px">
  <div id="thumbs" style="padding:5px; width:600px"></div>
  <div style="width:600px">
  <input type="hidden" name="image_name" id="image_name" value=""  />
  <input type="submit" name="submit" value="Submit" />
</div>
</div>
</div>
</form>

instead of current code...

<form id="cropimage" method="post" enctype="multipart/form-data">
  <input type="file" value="" size="" class="Textbox FieldRequired" name="ProductFields[3]" id="files">
  <input type="submit" value="upload" class="uploadphoto"/>
  <div id="popup_box">
  <!-- OUR PopupBox DIV--> 
  <a id="popupBoxClose">close</a>
  <div id="popup_box1" style="margin:0 auto; width:600px">
  <div id="thumbs" style="padding:5px; width:600px"></div>
  <div style="width:600px">
  <input type="hidden" name="image_name" id="image_name" value=""  />
  <input type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
</div>

the divs you started in tags better to finish it in that tag.

Thanks.

0
webGautam On

If you are looking to generates a new image in the dimensions you specify by maintaining the aspect ratio and croping image when necessary. Then this code is for you :)

function resize_image_crop($image, $width, $height)
 {

    $w = @imagesx($image); //current width

    $h = @imagesy($image); //current height
    if ((!$w) || (!$h)) { $GLOBALS['errors'][] = 'Image couldn\'t be resized because it wasn\'t a valid image.'; return false; }
    if (($w == $width) && ($h == $height)) { return $image; }  //no resizing needed
    $ratio = $width / $w;       //try max width first...
    $new_w = $width;
    $new_h = $h * $ratio;    
    if ($new_h < $height) {  //if that created an image smaller than what we wanted, try the other way
        $ratio = $height / $h;
        $new_h = $height;
        $new_w = $w * $ratio;
    }
    $image2 = imagecreatetruecolor ($new_w, $new_h);
    imagecopyresampled($image2,$image, 0, 0, 0, 0, $new_w, $new_h, $w, $h);    
    if (($new_h != $height) || ($new_w != $width)) {    //check to see if cropping needs to happen
        $image3 = imagecreatetruecolor ($width, $height);
        if ($new_h > $height) { //crop vertically
            $extra = $new_h - $height;
            $x = 0; //source x
            $y = round($extra / 2); //source y
            imagecopyresampled($image3,$image2, 0, 0, $x, $y, $width, $height, $width, $height);
        } else {
            $extra = $new_w - $width;
            $x = round($extra / 2); //source x
            $y = 0; //source y
            imagecopyresampled($image3,$image2, 0, 0, $x, $y, $width, $height, $width, $height);
        }
        imagedestroy($image2);
        return $image3;
    } else {
        return $image2;
    }
}

Related Questions in PHP

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in IMAGEAREASELECT

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.