Overlapping an png/gif image over other image in a specific coordinate relative to the second image on php

I have a background picture (lets call it B), i want to put an other image (a red dot gif or png) over B, in a specific coordinate of B.

For example, if B is 600x600px and Xcoor is 300 and Ycoor is 300, when the user load the php sript, B will be showed with a red do开发者_C百科t in the center. Thanks for any help.

You can make use of a image library that provides such a functionality with ease, for example WideImage which is based on PHP's GD2 library.

An example of merge with opacity 30 to position 10, 10:

  $img = WideImage::load('pic.jpg');
  $watermark = WideImage::load('logo.jpg');
  $new = $img->merge($watermark, 10, 10, 30);
  $new->output('jpg', 90); // send to browser

See Merge/Watermark and Output to browser Example.

To center the watermark on the picture, you can make use of Smart coordinates. Assuming the red-dot image is 60x60 pixels and it should be put in the middle of the image:

 $new = $img->merge($watermark, '50% – 30', '50% – 30');

You could use the CSS position property to position the dot over the image. If position is set to 'absolute', the element will be positioned with respect to its first positioned ancestor. For example:

<?php
echo '
    <style>
    #mydiv {
        position: relative;
        margin: auto;
        display: block;
        width: 600px;
    }
    #dot {
        position: absolute;
        left: 300px;
        top: 300px;
    }
    </style>';

echo '<div id="mydiv">';
echo '<img id="myimg" src="myimage.jpg">';
echo '<img id="dot" src="dot.png">';
echo '</div>';
?>