Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

On The Fly Watermark Enhanced 1.1


orient

Recommended Posts

Based on On The Fly Images 1.0 - Watermark and Thumbnail Generation.

-----------------------------------------------------------

 

by Rob O'Donnell. Jan 2004. [email protected]

 

====================================================

 

On The Fly Watermark Enhanced 1.1

 

-----------------------------------------------------------

 

by ORIENT | September 9, 2004

 

This enhanced version of Rob's cool contrib is intended to better the display of watermarks with the following three handsome features added.

 

1. Watermarks are displayed at the center of the original images.

2. Watermarks are shown at their original transparency.

3. Two watermarks of different sizes for smaller and larger orignal images respectively.

 

 

 

This is my first contrib to osC. After taking quite a number of contrib from here, I think it’s my time to contribute back. However, I’m not a php expert myself, so I fully adopted Rob’s great idea on utilizing the .htaccess means to realize the watermarking effect and amended his code to this. It took me almost a whole day to finally achieve my goal. I’ve tested it thoroughly on my own site, and it works cool.

 

When installing Rob’s contrib, I found the watermark image was displayed in an ugly way, due to the following three inadequate shortages.

 

1. Watermark is displayed at the upper left corner, thus might not cover the major part of the original image.

2. Watermark is not transparent, making it not very professional for the viewers.

3. Different size of original images display a universal watermark, therefore, watermark appears very huge on small images but tiny on big ones.

 

You’ll find only one .php file in the archive, which eliminates all these three shortages above. Basically there’s no need for you to modify the image.php file, unless you changed the size of the watermark samples mentioned below.

 

The water.htaccess is pretty the same as Rob’s. Please change [full path to your image.php directory] to the actual path your site. And after upload it to your image directory, please remember to change its file name to .htaccess (nothing before the dot).

 

I also included two sample watermark images, namely watermark.png (300X90, saying “THIS IS THE BIG LOGO) and watermark_s.png (150X50, saying “THIS IS THE SMALL LOGO”). You may open them with MacroMedia Fireworks to edit. For images wider than 300 pixels, the watermark.png will be displayed, while smaller images displaying watermark_s.png. If you’d like to make your own watermarks in a different resolution, and would like to change the 300 pixels rule, you may open image.php file with a text editor and locate “//The figure "300" can be changed to any figure suitable for your situation.” line, and make change according to your need. Please upload them to the same directory of image.php.

 

And that’s it. You may see the watermark result now. To recap the installation process:

 

1. Upload image.php watermark.png watermark_s.php to the same directory on your sever, say /home/public_html/watermark/

2. Open water.htaccess with your favorite text editor, and change [full path to your image.php directory] to the directory accordingly

3. Upload water.htaccess to the directory (directories) where all the images you wanna watermark locate, and rename water.htaccess to .htaccess

 

Tips for your customization:

 

1. Both .png files must be in PNG32 format with transparent background and percentage transparent objects.

2. If you want to change the rule of displaying which watermark and/or the position of the watermarks, please open image.php file and make changes to the following part of code

 

if (ImageSX($main_img) > 300) {

$posx = (ImageSX($main_img) - ImageSX($watermark_img))/2;

$posy = (ImageSY($main_img) - ImageSY($watermark_img))/2;

imagecopy($main_img, $watermark_img, $posx, $posy, 0, 0, $wmrk_size[0], $wmrk_size[1]);

 

}else{

$posxs = (ImageSX($main_img) - ImageSX($watermarks_img))/2;

$posys = (ImageSY($main_img) - ImageSY($watermarks_img))/2;

imagecopy($main_img, $watermarks_img, $posxs, $posys, 0, 0, $wmrks_size[0], $wmrks_size[1]);

 

}

 

Though I didn’t test the contrib on thumb part of Rob’s On The Fly Image 1.0, I think it’ll work fine with it if it already works well.

 

If my effort on this contrib making your admin life easier and happier and you’d like to donate, please pm me here. Thanks in advance!

 

Download this contrib here:

Link to comment
Share on other sites

  • Replies 87
  • Created
  • Last Reply

Top Posters In This Topic

Robert, here's mine:

 

RewriteEngine  on
RewriteRule	^(.*)\.jpg  /images/watermark_image.php?%{REQUEST_FILENAME}

 

My "images" folder is off of my Root. So if your images folder is under catalog which is off your Root, for example, then you'd use "/catalog/images/watermark..." instead.

Link to comment
Share on other sites

Here's an FAQ about GD Library:

http://www.boutell.com/gd/faq.html

 

To check if your server is GD Library enabled, please go to osC admin panel, choose "Server Info" from "Tools", under the PHPINFO part, you should find out if GD Library is enabled or not. You may just use browser's search function to locate the GD Library sector with the key word "GD Support". If it is disabled, please contact your hosting supplier to have it enabled.

 

This contrib along with GD Library is very powerful. You are able to protect not only your product images within osC, but virtually any images within your whole site by just creating .htaccess into target directories.

 

Though I haven't tested, I think there's no problem for you to even watermark images in different directories with different logos. Just setup up as many watermark directories as needed, put in each directory the same image.php file with different .png files, and finally key in different path to point to those different image.php file within the .htaccess for each and every directory with images.

Link to comment
Share on other sites

I checked and GD library is enabled.

 

The setup is so simple that I am puzzled as to why it isn't working.

 

I did the following:

 

1) I uncompressed the zip file

2) I edited the watermark.htaccess file to read

 

RewriteEngine on

RewriteRule ^(.*)\.jpg /images/image.php?%{REQUEST_FILENAME}

 

I later tried this:

 

RewriteEngine on

RewriteRule ^(.*)\.jpg /catalog/images/image.php?%{REQUEST_FILENAME}

 

3) I saved all 4 files (except the readme) to my images directory.

4) I renamed watermark.htaccess to just .htaccess (permission 644)

5) I checked permissions on 4 files which are 644, later tried changing to watermark files to 777

6) I opened my shopping cart to see if I could see the sample watermarks on my images, but no luck

 

Editing Post to add the following:

 

I am using OsCommerce Milestone 2 Ver. 2.2 from June 2003

Edited by secretuser
Link to comment
Share on other sites

Hey...just wondering... looked everywhere.... is there a DEMO or live site to view this in operation? That's always good.

 

Thanks Orient!

:unsure:

Okay, VNekic, DEMO listed below.

 

1. PHPINFO DEMO - please use your browser search function to locate "GD Support"''

 

2. GIFs without watermark

 

3. JPGs with watermark

Link to comment
Share on other sites

  • 5 weeks later...
An other question:

 

How to apply to the sub-folders? It's possible?

 

Thank You

 

brunods

 

According to the working principle of .htaccess, all subdirectories under the directory where you put the .htaccess will be protected by the watermark, unless you put a different .htaccess in a subdirectory to avoid the watermark.

Link to comment
Share on other sites

  • 2 weeks later...

I have a problem where .jpg images won't show on my secure web pages I think it may have something to do with "On The Fly Watermark" that I'm using. I you think this contribution could be causing the problem, please read my other post in General forum. Thanks!:

 

http://www.oscommerce.com/forums/index.php?showtopic=118520

Link to comment
Share on other sites

Hello,

 

How to make to apply to the JPG and the GIF?

Thank You

 

Brunods

 

Brunods, I don't think it's necessary, coz there are always some images on your web page you don't want watermark on them, such as icons and menu images. Therefore, my recommendation as well as my practice is to reformat all product images and any other images require copyright to .JPG to differentiate from non-copyright images.

Link to comment
Share on other sites

How do you make it so the watermarks are all the same size on the image? i.e.

 

one picture is 100x200 the watermark stays as 50x50

another picture is 1000x500 the watermark stays as 50x50

 

Open the only .php file included in the package, and subsitute all the content with the following code.

<?php
//watermark program
//Show that a jpeg image is going to be returned
//echo $QUERY_STRING;
//exit;
header("Content-type: image/jpeg");

//File names
$wmark='watermark.png';
$mimage=$QUERY_STRING;

//Loading
$watermark_img = imagecreatefrompng($wmark); 

$wmrk_size = getimagesize($wmark);

$main_img = imagecreatefromjpeg($mimage);
//ImageAlphaBlending($main_image, true); 

//Merge the 2 buffers
     $posx = (ImageSX($main_img) - ImageSX($watermark_img))/2;
     $posy = (ImageSY($main_img) - ImageSY($watermark_img))/2;
imagecopy($main_img, $watermark_img, $posx, $posy, 0, 0, $wmrk_size[0], $wmrk_size[1]);

//Output file to browser
imagejpeg($main_img);
imagedestroy($watermark_img);
imagedestroy($main_img);
?>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...