Drag an image over another image

[NickThissen]

Hi,

I'm building a website for a friend where some pictures need to be uploaded. The pictures need to get a watermark on them automatically after uploading (to prevent other people using them as their own), but the watermark placement cannot be 'static'; if I put it in the same place on each picture then it will obscure too much of the content in some pictures.

So I want to enable my friend to choose the location of the watermark (possibly even the size, but that's not really important at the moment) for each picture individually.
At the moment I just have a page with a FileUpload control that allows my friend to pick the image. It is uploaded when the OK button is pressed and the URL to the image is stored in a database. That's basically it.
Now I was thinking to make another page after the upload page where you can see the image you just uploaded and can drag a picture of the watermark (which will be a transparent PNG image, possibly GIF if PNG is not possible) around to place it. Once placed, the user could click an OK button and the watermark is copied onto the image.

So what I need is a way to drag an image (the watermark) over another image (the picture), as well as the possibility to retrieve the location of the watermark image (relative to the picture image) afterwards (so I can draw it onto the picture using GDI+).

Is there anything that allows me to do this? When I search for stuff related to dragging images all I find is drag and drop samples, where you take an arbitrary image file and drag it into the browser. That's not what I want; the watermark is always going to be the same image, and it will be on the image by default (in the center or something). The user should be able to move it (possibly outside the boundary of the image to completely hide it) but never completely remove it from the image and drag it somewhere else (no drag drop).

Any help?
Thanks!

[brin351]

The drag n drop would all be accomplisted with javascript. Once the user has placed the image you need to pass the co-ordinates to the server so you can run your gdi stuff. How you setup the draging image over image is another issue, maybe set the image as background of div that is the same size and then drag the watermark over the div if you get my meaning.

I googled and found the following javascript example of drag n drop. Let us know how you get on.

http://www.webreference.com/programm...pt/mk/column2/

[gep13]

Hello,

You may also find some help here:

http://www.4guysfromrolla.com/articles/042909-1.aspx

Gary

[motil]

I recently completed very complex Drag and Drop project with jQuery + jQuery UI, I didn't did what you just asked but I see how you can achieve it very easly...

http://jqueryui.com/demos/draggable/

http://jqueryui.com/demos/droppable/

read the documentation carefully for both drag & drop you'll see you can get all the functionality you just described.

[gep13]

Man, I really need to look more into this whole jQuery thing! It really is black magic!!

Gary

[motil]

I've been talking about jQuery and it's wonders for month and only now you pick it Gary ??
John Resig did wonderful job with the jQuery library and hes work truly shaped how modern website should look.

[NickThissen]

The jQuery thing does look very promising. I'll take a look at that. I did try the Sortable thingy on that site a while back but never got it to work though, so I might be doing something wrong. We'll see soon. Thanks for the tips!

[gep13]

I've been talking about jQuery and it's wonders for month and only now you pick it Gary ??
John Resig did wonderful job with the jQuery library and hes work truly shaped how modern website should look.

No, it's been on my reading list for some time now, but just haven't got round to it, so many other things to do All the examples that you have been posting and linking to lately have really been driving home that I should get round to it sooner rather than later!!

[motil]

Sooner Gary

@Nick, I might try to compose a little example for you, is there anymore details I should know ?

[NickThissen]

In detail I'd need this:

• Background picture (static)
• Draggable transparent PNG watermark
• After dragging, I need the coordinates of the watermark (it's location relative to the background picture) on the server. I suppose I could put them in a hidden field control or something, right? Once I have the coordinates I can use GDI+ to save the watermark into the picture (don't need help with that).
• If at all possible, I don't want the scrollbars to appear when dragging the watermark beyond the background image. If that happens just let it drag beyond the image. I don't think the user will ever drag it that far (otherwise there's no point in having the watermark...) but just in case.

I'll be working on this in a few minutes probably but if you can come up with something that would be great. Thanks!

[motil]

Ok, I made some very basic example for you, for start just drop every thing into test html page and learn it a bit, then we'll tweak it as you need.

* you must have Both jQuery and jQuery UI plugin for this to work

** don't forget to put two images inside the image tag.


Css

<style type="text/css">
.DroppableOver{border:2px solid red !important;}
#OriginalImage{border:1px solid #000;width:240px;height:110px;position:relative;}
#WaterMark{z-index:12700;position:absolute;}
</style>

Javascript

<script type="text/javascript">
    $(function () {
        $('#WaterMark').draggable(
    {
        start: function (e, ui) {
        },
        cursor: 'move',
        zIndex: 2700,
        revert :'invalid',
        containment: '#OriginalImageContainer'
    });
  $('#OriginalImage').droppable({
        hoverClass: 'DroppableOver',
        drop: InitializeWaterMark
    })
    });

       var  InitializeWaterMark = function() {
       var position = $('#WaterMark').position();
       document.getElementById('xpos').value = position.left;
       document.getElementById('ypos').value = position.top;
      
    }
      </script>

HTML

 <br /><br /><br />
    <div id="OriginalImage" >
        <div id="WaterMarkContainer">
           <img src="HERE GOES THE WATER MARK IMAGE URL" id="WaterMark" />
        </div>
        <div id="OriginalImageContainer">
        <img src="HERE GOES THE ORIGINAL IMAGE URL"  /> 
        </div>
      
    </div>

    <br /><br /><br />
    X-Pos : <input type="text" id="xpos" value="" /><br />
    Y-Pos :<input type="text" id="ypos" value="" /><br />

it's very basic but it does what you've asked for.

[NickThissen]

Thanks. I got it pretty much working with some minor adjustments. A few problems remain though.

This is what I have now:

CSS:

.DroppableOver
{
    border: 2px solid red !important;
}
 
#OriginalImage
{
    border: 1px solid #000;
    width: 400px;
    height: 300px;
    position: relative;
}
 
#OriginalImageContainer
{
    width: 400px;
    height: 300px;
}
 
#WaterMark
{
    z-index: 12700;
    position: absolute;
}

Javascript:

<script type="text/javascript">
        $(function () {
            $('#WaterMark').draggable(
                    {
                        start: function (e, ui) {
                        },
                        cursor: 'move',
                        zIndex: 2700,
                        revert: 'invalid',
                        containment: '#OriginalImageContainer'
                    });
            $('#OriginalImage').droppable({
                hoverClass: 'DroppableOver',
                drop: InitializeWaterMark
            })
        });
 
        var InitializeWaterMark = function () {
            var position = $('#WaterMark').position();
            var imgPosition = $('#OriginalImageContainer').position();
            document.getElementById('xpos').value = position.left - imgPosition.left;
            document.getElementById('ypos').value = position.top - imgPosition.top;
 
        }
    </script>

(I am subtracting the position of the original image because there is a menu to the left, a header to the top, etc, and it's in a content page in a master page).

ASPX

<div id="OriginalImage" >
        <div id="WaterMarkContainer">
           <img src="../Images/watermark.png" id="WaterMark" alt="Watermerk" />
        </div>
        <div id="OriginalImageContainer">
            <asp:Image runat="server" ID="imgFoto" Width="400px" Height="300px" ImageUrl="~/Images/Fotos/Chrysanthemum.jpg" />
        </div>      
    </div>

(The ImageUrl will be set during runtime, hence the use of an asp:Image server control instead).



The problems:

1. The watermark starts off above the original image. Once dragged inside, it cannot go above the image anymore (that's good), but the space above the original image stays empty (looks a bit strange).
2. The watermark cannot go outside the original image on the top, left or bottom, but it can go all the way to the right of the page, outside of the image. It would be best to just constrain it inside the original image so it is always 100% visible (that wasn't in my original plan but it does make more sense).

[NickThissen]

Actually, I made the OriginalImage css to float left (I actually need two images side by side, and both need to get the watermark, hence the floating), and both problems fixed themselves. It is working fine now Thanks!

[motil]

Glad I could help!

[gep13]

Sooner Gary

Hopefully!

To both of you, this is a great little sample!! One of you might want to think about adding this into the ASP.Net CodeBank. Unfortunately there isn't a jQuery CodeBank.

Gary