Watermark images (on the fly)

This is something i made because I couldn't find any hack working for 3.0.7. Just took a couple of minutes.


Works with 3.0.7!

[steadicamop]

This is a peice of code that needs be altered as it shows above? I'm not too clued up on PHP but understand the basic stuff.

Thanx

[Aidan]

I made a few modifications to the code, as it's not really suitable for later versions of vBulletin 3.0.x. I made some alterations to support 3.0.6, as I'm trying to migrate a bunch of hacks across as part of an upgrade.

First of all, there's some code that spits out the content-length to tell the browser how large the file is. With current hack, the code spits out one content-length, and then an image with a different length. Some browsers get confused with this.

So, firstly, back up file you're going to edit!! This has been tested on a single forum, so it might well BREAK your forum if you try it.

Then, find the line that states (near the bottom)

header('Content-Length: ' . $attachmentinfo['filesize']);

and remove it. We'll replace it in another position later.

Once again, find the lines that state

        echo $attachmentinfo['filedata'];

And change them to be like the following

if ($extension == 'jpg' && !$thumb) {
        $filename = "path/to/the/file/vB3/watermark.png"; // use a PNG-24 to preserve transparency!

        $im = imagecreatefromstring($attachmentinfo['filedata']);
        imagealphablending($im, true);

        $watermark = imagecreatefrompng($filename);

        $y = imagesy($im) - imagesy($watermark); // select the bottom left (y of im less y of watermark)
        // if you want top left, you could use $y=0; instead
        
        $w = imagesx($watermark);
        $h = imagesy($watermark);
        
        imagecopy($im, $watermark, 0, $y, 0, 0, $w, $h);

        imagejpeg($im, "", 80);

        imagedestroy($watermark); // clean up after ourselves!
        imagedestroy($im);
        } else {

        header('Content-Length: ' . $attachmentinfo['filesize']);
        echo $attachmentinfo['filedata'];
}

Now, for some reason, I've got one or two images it doesn't seem to work right on. I have no idea why, and I'm hoping someone else might be able to give a hint or two? Also what would be good would be the ability to generate the appropriate content-length header, but again, I've no clue how to do that.

Hopefully Robbban will be able to incorporate some of these changes into an "offical" version - after all, it is his code!

[triste]

filesize the $attachpath, but it wouldn't work if your using the database for saving the attachments.

or this,

ob_start();
imagejpeg($im, "", 95);
header('Content-Length: ' . ob_get_length());
ob_end_flush();

i tried finding a function to find the size of an image resource, but didn't find one.

[Aidan]

I'm not sure that the code you suggest will work, although I haven't tried it. The problem is that the imagejpeg function appears to send the image to the browser.

We can't take the size of the file on the disk/database, as we've made modifications to the image, and hence it's size is different. This code is doing it on the fly, rather than storing it with the watermark in it.

[noppid]

Originally Posted by triste

filesize the $attachpath, but it wouldn't work if your using the database for saving the attachments.

or this,

ob_start();
imagejpeg($im, "", 95);
header('Content-Length: ' . ob_get_length());
ob_end_flush();

i tried finding a function to find the size of an image resource, but didn't find one.

Use sizeof() to get a string length.
http://us4.php.net/manual/en/function.sizeof.php

[noppid]

Originally Posted by Aidan

I'm not sure that the code you suggest will work, although I haven't tried it. The problem is that the imagejpeg function appears to send the image to the browser.

We can't take the size of the file on the disk/database, as we've made modifications to the image, and hence it's size is different. This code is doing it on the fly, rather than storing it with the watermark in it.

You are correct, imagejpeg does send to the browser, however OB() is output buffer and stuffs it in a var for you to echo it, so you can then work with it or use the example above.

There are alot of articles on image manipulation. All frown on the use of image manipulation on the fly. The bench marks on vBGarage doing image resize on the fly would have made you cringe. We have since changed it. Just a note.

[triste]

oh, right, can't use filesize. ob works for me. to think about it, the final output depends on imagejpeg, so there's no other way to get the size (i think). unless you make a temp file...

anyway, it does hurt performance on sites with large collection of images. but the fact that this hack works, an admin option could probably be added to switch on the fly/on upload/ or simply off for watermarking.

[noppid]

Originally Posted by triste

oh, right, can't use filesize. ob works for me. to think about it, the final output depends on imagejpeg, so there's no other way to get the size (i think). unless you make a temp file...

PHP Code:


// get dimensions of image before popping it off.
$size_y = imagesy($thumb['data']);
$size_x = imagesx($thumb['data']);

// capture new image for streaming
ob_start();
imagejpeg($thumb['data'],'',75);                
$thumbdata = ob_get_contents();
ob_end_clean();

// clean up GD
imagedestroy ($thumb['data']); 

//get filelength
$image_file_length = strlen($thumbdata); 


Try that.

[Aidan]

Fantastic stuff - I'm learning here, which is good. I agree, the watermarking is heavy on the processor. Personally, I'd like to keep able to watermark images as they're uploaded. However, that still leaves me with plenty of images already in the system that need watermarking.

[steadicamop]

I've got it working on mine, pretty quickly too, and much better, the full picture loads, I don't know whats different either!

Just one thing, the watermark ends up in the bottom left hand corner, how do I move it to show in the bottom right hand corner? I have a Gallery installed and the watermarks show on the bottom right ... I just want it to look all the same.

Thanx!

<edit>
For whatever reason, on larger images it works fine, on smaller ones, it doesn't load correctly, I've only just discovered this, anyone have any ideas?
</edit>