[Resolved] Using Watermark.js

[Max]

Tom

I am looking for a low fat solution to adding watermarks to Woo images.

I want the solution to be non destructive. That is, it should not alter original images.

This looks like an interesting prospect. Can you please explain to me how I would implement it on my GP website.

Watermark.js

[Tom]

Hey Max,

I’m not really sure how you’d integrate that with WooCommerce. You might be better off using a pre-built watermark solution for WooCommerce.

[Max]

I have literally tested everything in the WP repository. Can’t find a single working solution.

The only plugins that work rely upon creating duplicate watermarked image. That instantly doubles the size of my site which is not acceptable.

[Leo]

Since not even Tom has any ideas, I would say your best bet is trying on Stackoverflow or some sort of WooCommerce specific forum.

If not then you may need to consider hiring a developer to code it a custom plugin.

[Max]

I have located a php watermark script on Github that looks promising:

PHP Watermark

So I place this code in my htaccess file:

RewriteEngine On
RewriteRule ^(.*\.(gif|jp?g|png))$ watermark.php?image=$1&watermark=watermark.jpg [NC]

And this in my functions.php file:

<?php
// Configuration
$options = array(
    'WATERMARK_IMAGE'	    => 'watermark.png',		// The location and name of the watermark  (If using ready a ready .PNG or .GIF set WATERMARK_IS_READY to TRUE)
    'WATERMARK_OPACITY'	    => '45',			// The opacity the image will be merged with, this doesn't apply to WATERMARK_IS_READY
    'WATERMARK_QUALITY'	    => '100',			// Image Quality - 0 to 100 - Higher is better
    'WATERMARK_IS_READY'	    => FALSE,		// If your watermark image is already a .png or .gif with transparency set, set this to TRUE
    'WATERMARK_PLACE'	    => 'BOTTOM_RIGHT',	// This value accepts -> BOTTOM_RIGHT, BOTTOM_LEFT, TOP_LEFT, TOP_RIGHT, CENTER, CENTER_LEFT, CENTER_RIGHT
    'WATERMARK_MARGIN'	    => '10',
);
function createImageFromFile($full_or_relative_path_to_image) {
    list(,, $image_type) = getimagesize($full_or_relative_path_to_image);
    if ($image_type === NULL) {
	return null;
    }
    switch ($image_type) {
	case IMAGETYPE_GIF:
	    return imagecreatefromgif($full_or_relative_path_to_image);
	    break;
	case IMAGETYPE_JPEG:
	    return imagecreatefromjpeg($full_or_relative_path_to_image);
	    break;
	case IMAGETYPE_PNG:
	    return imagecreatefrompng($full_or_relative_path_to_image);
	    break;
	default:
	    return null;
	    break;
    }
}
// Overwrite Defaults
$original_image	= (isset($_GET['image'])	? $_GET['image']	    : null);
$watermark_image	= (isset($_GET['watermark'])	? $_GET['watermark']	    : $options['WATERMARK_IMAGE']);
$place		= (isset($_GET['place'])	? $_GET['place']	    : $options['WATERMARK_PLACE']);
$margin		= (isset($_GET['margin'])	? $_GET['margin']	    : $options['WATERMARK_MARGIN']);
$quality		= (isset($_GET['quality'])	? $_GET['quality']	    : $options['WATERMARK_QUALITY']);
$is_watermark_ready	= (isset($_GET['is_ready'])	? ($_GET['is_ready'] == 'true' ? TRUE : FALSE) : $options['WATERMARK_IS_READY']);
// Load Image & Watermark
$image = createImageFromFile($original_image);
$watermark = createImageFromFile($watermark_image);
if (!$image || !$watermark)
    exit;
/*
 *  Math for watermark positions
 * - to avoid use down the road of php: imagesx and imagesy
 * - which can be used to obtain both height and width of the $image and $watermark element
 */
$watermark_width	= imagesx($watermark);
$watermark_height	= imagesy($watermark);
$image_width	= imagesx($image);
$image_height	= imagesy($image);
$watermark_pos_x	= $image_width	-   $watermark_width;
$watermark_pos_y	= $image_height	-   $watermark_height;
switch ($place) {
    case 'BOTTOM_LEFT':
	if ($is_watermark_ready) {
	    imagecopy($image, $watermark, 0 + $margin, $watermark_pos_y - $margin, 0, 0, $watermark_width, $watermark_height);
	} else {
	    imagecopymerge($image, $watermark, 0 + $margin, $watermark_pos_y - $margin, 0, 0, $watermark_width, $watermark_height, $options['WATERMARK_OPACITY']);
	}
	break;
    case 'BOTTOM_CENTER':
	if ($is_watermark_ready) {
	    imagecopy($image, $watermark, ($watermark_pos_x / 2), $watermark_pos_y - $margin, 0, 0, $watermark_width, $watermark_height);
	} else {
	    imagecopymerge($image, $watermark, $watermark_pos_x - $margin, $watermark_pos_y - $margin, 0, 0, $watermark_width, $watermark_height, $options['WATERMARK_OPACITY']);
	}
	break;	
    case 'BOTTOM_RIGHT':
	if ($is_watermark_ready) {
	    imagecopy($image, $watermark, $watermark_pos_x - $margin, $watermark_pos_y - $margin, 0, 0, $watermark_width, $watermark_height);
	} else {
	    imagecopymerge($image, $watermark, $watermark_pos_x - $margin, $watermark_pos_y - $margin, 0, 0, $watermark_width, $watermark_height, $options['WATERMARK_OPACITY']);
	}
	break;
    case 'TOP_LEFT':
	if ($is_watermark_ready) {
	    imagecopy($image, $watermark, 0 + $margin, 0 + $margin, 0, 0, $watermark_width, $watermark_height);
	} else {
	    imagecopymerge($image, $watermark, 0 + $margin, 0 + $margin, 0, 0, $watermark_width, $watermark_height, $options['WATERMARK_OPACITY']);
	}
	break;
    case 'TOP_CENTER':
	if ($is_watermark_ready) {
	    imagecopy($image, $watermark, ($watermark_pos_x / 2), 0 + $margin, 0, 0, $watermark_width, $watermark_height);
	} else {
	    imagecopymerge($image, $watermark, $watermark_pos_x - $margin, 0 + $margin, 0, 0, $watermark_width, $watermark_height, $options['WATERMARK_OPACITY']);
	}
	break;	
    case 'TOP_RIGHT':
	if ($is_watermark_ready) {
	    imagecopy($image, $watermark, $watermark_pos_x - $margin, 0 + $margin, 0, 0, $watermark_width, $watermark_height);
	} else {
	    imagecopymerge($image, $watermark, $watermark_pos_x - $margin, 0 + $margin, 0, 0, $watermark_width, $watermark_height, $options['WATERMARK_OPACITY']);
	}
	break;
    case 'CENTER':
	if ($is_watermark_ready) {
	    imagecopy($image, $watermark, ($watermark_pos_x / 2), ($watermark_pos_y / 2), 0, 0, $watermark_width, $watermark_height);
	} else {
	    imagecopymerge($image, $watermark, ($watermark_pos_x / 2), ($watermark_pos_y / 2), 0, 0, $watermark_width, $options['WATERMARK_OPACITY']);
	}
	break;
    case 'CENTER_LEFT':
	if ($is_watermark_ready) {
	    imagecopy($image, $watermark, 0 + $margin, ($watermark_pos_y / 2), 0, 0, $watermark_width, $watermark_height);
	} else {
	    imagecopymerge($image, $watermark, 0 + $margin, ($watermark_pos_y / 2), 0, 0, $watermark_width, $watermark_height, $options['WATERMARK_OPACITY']);
	}
	break;
    case 'CENTER_RIGHT':
	if ($is_watermark_ready) {
	    imagecopy($image, $watermark, $watermark_pos_x - $margin, ($watermark_pos_y / 2), 0, 0, $watermark_width, $watermark_height);
	} else {
	    imagecopymerge($image, $watermark, $watermark_pos_x - $margin, ($watermark_pos_y / 2), 0, 0, $watermark_width, $options['WATERMARK_OPACITY']);
	}
	break;
}
// Output JPEG
header('Content-Type: image/jpeg');
imagejpeg($image, null, $quality);
// Clear Memory
imagedestroy($image);
imagedestroy($watermark);
?>

Questions:
1. Will this work for GP
2. How can I edit the PHP so it only applies for a certain JPEG file size
3. Where to I keep the .phg image that is called for the watermark. Does it go in the root of the site with the .htaccess file?

Thanks for your help.

[Tom]

Hey Max,

I’m afraid I wouldn’t know without really digging into the code, which is a little out of scope of the forum.

This may be better for WooCommerce support, as you’re trying to apply watermarks to their images. They might know of a plugin you haven’t tested yet that works.

[Author]

Posts