Clip Art Image Interactive

Submitted by rinvizle on Thursday, July 28, 2016 - 17:23.
Hello guys. In this tutorial we will show you how to create an application Clip Art Image Interactive in php for giving some funny touches to an image. We will be using jQuery and jQuery UI for dragging and resizing the clip art images. With PHP the image and the clip art images will get merged into to the main image and you can viewed the for the final result.

Sample Code

Markup Script - In the markup script we have a main container with the objects sidebar, the main image and the tools area.
  1. <div id="content">
  2.         <div id="background" class="background">
  3.                 <img id="obj_0" width="640" height="480" src="background.jpg"/>
  4.         </div>
  5.         <div id="tools">
  6.         </div>
  7.         <div id="objects">
  8.                 <div class="obj_item">
  9.                         <img id="obj_1" width="50" class="ui-widget-content" src="elements/bowtie.png" alt="el"/>
  10.                 </div>
  11.                 <div class="obj_item">
  12.                         <img id="obj_2" width="50" class="ui-widget-content" src="elements/mus1.png" alt="el"/>
  13.                 </div>
  14.                 <div class="obj_item">
  15.                         <img id="obj_3" width="50" class="ui-widget-content" src="elements/beard.png" alt="el"/>
  16.                 </div>
  17.         </div>
  18.         <a id="submit"><span></span></a>
  19.         <form id="jsonform" action="merge.php" method="POST">
  20.                 <input id="jsondata" name="jsondata" type="hidden" value="" autocomplete="off"></input>
  21.         </form>
  22. </div>
Javascript - The element images that are dropped onto the main image will be stored in the following JSON object. Every time we drop a new image we insert it into the “images” array. And the images are resizable and draggable.
  1. var data = {
  2.         "images": [
  3.                 {"id" : "obj_0" ,"src" : "background.jpg", "width" : "640", "height" : "480"}
  4.         ]
  5. };
  6. $('#objects img').resizable({
  7.         handles : 'se',
  8.         stop    : resizestop
  9. }).parent('.ui-wrapper').draggable({
  10.     revert      : 'invalid'
  11. });
result The background div, where the main image is inserted is droppable. Each time we drop an clip art image into this container we add it to the JSON data object if it is not there already. The most important parameters added are the width, height, top and left. The last two are calculated based on the difference between the absolute top or left of the container and the draggable object.
  1. $('#background').droppable({
  2.         accept  : '#objects div',
  3.         drop    : function(event, ui) {
  4.                 var $this               = $(this);
  5.                 ++count_dropped_hits;
  6.                 var draggable_elem = ui.draggable;
  7.                 draggable_elem.css('z-index',count_dropped_hits);
  8.                 var objsrc              = draggable_elem.find('.ui-widget-content').attr('src');
  9.                 var objwidth    = parseFloat(draggable_elem.css('width'),10);
  10.                 var objheight   = parseFloat(draggable_elem.css('height'),10);
  11.                 var objtop              = ui.offset.top - $this.offset().top;
  12.                 var objleft             = ui.offset.left - $this.offset().left;
  13.                 var objid               = draggable_elem.find('.ui-widget-content').attr('id');
  14.                 var index               = exist_object(objid);
  15.                 if(index!=-1) {
  16.                         data.images[index].top  = objtop;
  17.                         data.images[index].left = objleft;
  18.                 }
  19.                 else{
  20.                         var newObject = {
  21.                                 'id'            : objid,
  22.                                 'src'           : objsrc,
  23.                                 'width'         : objwidth,
  24.                                 'height'        : objheight,
  25.                                 'top'           : objtop,
  26.                                 'left'          : objleft,
  27.                                 'rotation'  : '0'
  28.                         };
  29.                         data.images.push(newObject);
  30.  
  31.                         $('<div/>',{
  32.                                 className       :       'item'
  33.                         }).append(
  34.                                 $('<div/>',{
  35.                                         className       :       'thumb',
  36.                                         html            :       '<img width="50" class="ui-widget-content" src="'+objsrc+'"></img>'
  37.                                 })
  38.                         ).append(
  39.                                 $('<div/>',{
  40.                                         className       :       'slider',
  41.                                         html            :       '<span>Rotate</span><span class="degrees">0</span>'
  42.                                 })
  43.                         ).append(
  44.                                 $('<a/>',{
  45.                                         className       :       'remove'
  46.                                 })
  47.                         ).append(
  48.                                 $('<input/>',{
  49.                                         type            :       'hidden',
  50.                                         value           :       objid  
  51.                                 })
  52.                         ).appendTo($('#tools'));
  53.                         $('.slider').slider({
  54.                                 orientation     : 'horizontal',
  55.                                 max                     : 180,
  56.                                 min                     : -180,
  57.                                 value           : 0,
  58.                                 slide           : function(event, ui) {
  59.                                         var $this = $(this);
  60.                                         draggable_elem.css({
  61.                                                 '-moz-transform':'rotate('+ui.value+'deg)',
  62.                                                 '-webkit-transform':'rotate('+ui.value+'deg)'
  63.                                         });
  64.                                         $('.degrees',$this).html(ui.value);
  65.                                 },
  66.                                 stop            : function(event, ui) {
  67.                                         newObject.rotation = ui.value;
  68.                                 }
  69.                         });
  70.                 }
  71.         }
  72. });
For the Result of the image. result Hope that you learn in this project and enjoy coding. Don't forget to LIKE & SHARE this website.
Tags
#PHP
#JavaScript #Web #Jquery
User Interaction
jQuery UI
Drag and drop

Add new comment

About text formats
  • 16 views