Skip to main content

Drag and Move image using jQuery and crop using PHP - Part1

Web developers on some occasions are required to give user the ability to move image to fit the view or crop some part of image. In this blog post we will see how to allow user to drag/move image using jQuery and save the result (cropped) in new image file using PHP.

 I have break this in two posts. Part 1 will contain client side part. Part 2 will contain server side (PHP) part.

 Client side part (HTML+ jQuery)

 Add a reference to jQuery library. I am using version 1.8 for this example
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
Display image inside a div. Div will be of fixed width and height which will be our viewport. Part of image outside this div will be cropped. For this example lets keep it to 850x600. First write a simple css to apply on this div
#imgContainer {
    width:850px;
    height:600px;
    overflow:hidden; /* part of image outside this div should be hidden */
    border-width:2px;
    border-style:solid;
    border-color:#000000
}
Make a div and place image inside it
<div id="imgContainer">
    <img src="movable.jpg" style="position:relative;top:0px;left:0px;" id="imgMy" />
</div>
We will create a FORM  that will be POSTed to our PHP script . This form will hold current X and Y co-ordinates of image.
<form method="POST" action="crop.php">
    <input type="hidden" value="0px" name="locationX" id="locationX" />
    <input type="hidden" value="0px" name="locationY" id="locationY" />
    <input type="submit" value="Save" />
</form>
Now we will call jQuery to make our image movable/draggable.
<script type="text/javascript">
    jQuery(document).ready(function ($) {              
        $( "#imgMy" ).draggable({
            drag: function( event, ui ) {
                $("#locationX").val($("#imgMy").css('left'));
                $("#locationY").val($("#imgMy").css('top'));
            }
        });
    });          
</script>
We now have a image that is movable/draggable.

To learn how to store cropped image in PHP . Read 
Drag and Move image using jQuery and crop using PHP - Part2
Labels:

Comments

Post a Comment

Share your wisdom

Popular posts from this blog

Multithreaded C# TCP server to handle multiple clients

I decided to write a minimal multithreaded TCP based server as a blog post. Following class can serve as a skeleton for any small or large scale multithreaded TCP socket server. It do not contain much error handling , it is only to give an idea that how multithreaded server works and how it can process multiple clients using threading. using System; using System.Text; using System.Net; using System.Net.Sockets; using System.Threading; using System.Collections.Generic; namespace RandomStuffMine { public class MTServer {     public int Port{get;set;}     public Socket ServerSocket{get;set;}     private List<Client> Clients=new List<Client>();     private bool runServer=true;     public MTServer(int port)     {         Port=port;         ServerSocket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.Tcp);     }   ...
1 comment
Read more

Decoding JPEG image file using libavcodec

I got a chance to work on a video encoding application that decodes series of jpeg files and convert them into ogg theora video file. I used the infamous libavcodec library that is used in FFMPEG . I decided to write blog posts explaining how I decode jpeg images and convert them into ogg video file. This is the first part and in this I will explain how to decode jpeg images using libavcodec. To learn how to write decoded images as a ogg video file please read http://random-stuff-mine.blogspot.com/2017/07/encoding-raw-images-to-ogg-theora-video.html Before reading this blog post you must be aware of using and setting up libavcodec. I highly recommend this tutorial to get basics of using libavcodec http://www.ffmpeg.org/doxygen/0.6/api-example_8c-source.html Allocating input format context We will first allocate input format for reading the file. We will use avformat_open_input function that will allocate AVFormatContext structure passed to it , the function detects input typ...
Post a Comment
Read more

Encoding raw images to Ogg Theora video using libavcodec

In one of the blog posts we learned how to decode jpeg images using libavcodec. This is the second part of that post. In this we will learn how to encode decoded images (raw images) to theora and write them in ogg video file. In the end of the first part we saved our raw image in raw_data variable and its length in raw_data_size variable. Lets assume that we packaged all our decoding code in one function called "decode_jpeg_image" which has following signature int decode_jpeg_image(char *filename,int file_name_size,uint8_t *raw_data,int *raw_data_size) filename = name of jpeg file to decode file_name_size = length of jpeg file's name raw_data = contains decoded raw image on return raw_data_size = contains length of raw_data on return Now let's start working on how to encode this image in raw_data to theora and write that image to ogg video file. Finding Theora encoder We first have to find encoder for THEORA which is represented by AVCodec structure. He...
1 comment
Read more