1

I have found a way to move a picture round in a box made of a tag. It works perfectly as i want it. The code is as flows:

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery("#my-image").css({top: 0, left: 0});

        var maskWidth = jQuery("#my-mask").width();
        var maskHeight = jQuery("#my-mask").height();
        var imgPos = jQuery("#my-image").offset();
        var imgWidth = jQuery("#my-image").width();
        var imgHeight = jQuery("#my-image").height();

        var x1 = (imgPos.left + maskWidth) - imgWidth;
        var y1 = (imgPos.top + maskHeight) - imgHeight;
        var x2 = imgPos.left;
        var y2 = imgPos.top;

   jQuery("#my-image").draggable({containment: [x1, y1, x2, y2]});
        jQuery("#my-image").css({cursor: 'move'});
   });

</script>


<div id="my-mask" style="width: 600px; height: 200px; overflow: hidden;">
    <img id="my-image" src="stormP.jpg" width="" height=""/>
</div>

Now I want a button that can save the visible part of the picture in a new file. Can anyone point me in the right direction. I have no clue of how to do that. I'm using PHP, CSS and JQuery.

Alternately I can use CSS to place the hole picture inside the tag with overflow hidden. In that case I need the coordinates of the upper left corner compared to the picture coordinates. Then I would set the background-position: -300px -330px; as the upper left corners X,Y coordinates relative to the picture like this:

<div style="cursor: pointer; width: 600px; height: 200px; background-image: url(stormP.jpg); background-repeat: no-repeat;  background-position: -300px -330px;">

Any of the two will do.

Any help will be greatly appreciated!

Bo S. Petersen
  • 45
  • 1
  • 5

1 Answers1

1

You have two ways that you can handle this. In PHP you can do server side editing (You would pass the coordinates to the server and then use something similar to GD in order to crop the image to the set width/height you want), or use the javascript canvas method, which are explained in many tutorials, one of which can be found here.

  • That is exactly what I want! My problem is just how to find the starting point of where to crop the picture. If I use the div-tag method I would have to start where the top left corner (0,0) of the div-tag is in the picture. How do I read the coordinates of the picture? – Bo S. Petersen Feb 17 '15 at 13:23
  • Can you edit [this jfiddle](http://jsfiddle.net/y6ue1zq1/) a bit to give me an example of what you're trying to accomplish, and I'll help you out further. –  Feb 17 '15 at 13:25
  • Try this one: http://jsfiddle.net/boskbh/wv6wmu9p/ You should be able to drag the picture round in the box (made out of css styled
    tag). Correct me if i'm wrong. But if I want to crop the picture to what I se in the box I have to know where the 0,0 coordinate of the div-tag is in the picture. Afterwords I can use that as a starting point for cropping the picture. Right?
     – Bo S. Petersen Feb 17 '15 at 13:59