Scaling and Watermarking Images

www.prodigyview.com

OverviewObjective

Learn the how to create watermark on an image using text or another image. Also learn how to scale images to different sizes.

Requirements

Understanding of Image Basics

Installed version of Imagick

Estimated Time

10 minutes

www.prodigyview.com

Follow Along With A Code Example

1. Download a copy of the example code at www.prodigyview.com/source.

2.Install the system in an environment you feel comfortable testing in.

3.Proceed to examples/avi/ScaleandWatermarkImage.php

http://www.prodigyview.com

Scaling An ImageTo start this store we need an image to scale. First we are going to define our image and afterwards we are going to scale it too different sizes using PVImage::scaleImage.

1. Define the image and pass the image location as an argument

2. Set the new width

3. Set the new height

4. The location of the scaled image

Scaled Images

The scaled images should look something similar to below. Both of these are much smaller than the original.

www.prodigyview.com

Scaling With OptionsDepending on the scenario, such as images stored as bytes in the database, you might receive the image a string in php. This is not a problem, we just set the type to blob.

1. Read the image in from a file as a string 2. Set the file option to ‘blob’ for images in blob/bytes/string format

3. Use a defined image name instead of a random one

4. Do not add an extension to the filename

Scaled With Options 2

Now that we have our options set, we can scale the image from the bytes read from the file, and write it out to file.

1. Pass in the bytes string from the file 2. Set the width and height

3. Pass in the options

Watermark with TextAdd we move on watermarking images. Watermarking with text is relatively simple. All we need is the image to watermark and a string of text.

1. Location of the image

2. Text to place as a watermark

Watermarked Image

Our watermarked image, without any modifications, will look like below.

Text Watermarking with Options

Our previous example of watermarking can be a little bland. With some options, we can add some style to the watermarks.

1. Read the image in as bytes 2. Change the font color 3. Rotate the text

4. Offset the set 5. Set the name of the file 6. Use blob for byte input

Watermarked Image with Flavor

Pass in the variables and we should get back our image with an altered text watermark.

1. Pass in the image bytes 2. Set the text 3. Pass in the options

Watermark with ImageOur final demonstration in this tutorial is watermarking with another image. What the method watermarkImageWithImage() really does is combine two images together. In our example we use a smaller image of the same image, but in production environment, it is suggested to a very light image.

Two Images CombinedBelow is how the images looked combine. Replace with your own image and change the offset to customize the watermark.

Review1. Scale an image using the

PVImage::scaleImage() method.

2. Watermark an image with text using the PVImage::watermarkImageWithText() method

3. Watermark/Combine two image with another image using PVImage::watermarkImageWithImage() method.

www.prodigyview.com

API ReferenceFor a better understanding of the image manipulation, check out the api at the two links below.

PVImage

www.prodigyview.com

More Tutorials

For more tutorials, please visit:

http://www.prodigyview.com/tutorials