I am testing a script where I watermark an image in my webpage.
The script works fine and the image is watermark but my problem is that only the image is displayed on the page.
As soon as I add the script to my page it's like the web page is converted to the image that I'm watermarking.
I think it's because of header("content-type: image/jpeg"); from the code.
I need to watermark the image on my webpage but I also need the rest of my webpage to be displayed too.
How is this done? I'm quite confused on how this works.
The script I'm using is from here
Here's the code I'm using:
<?php
$main_img = "Porsche_911_996_Carrera_4S.jpg"; // main big photo / picture
$watermark_img = "watermark.gif"; // use GIF or PNG, JPEG has no tranparency support
$padding = 3; // distance to border in pixels for watermark image
$opacity = 100; // image opacity for transparent watermark
$watermark = imagecreatefromgif($watermark_img); // create watermark
$image = imagecreatefromjpeg($main_img); // create main graphic
if(!$image || !$watermark) die("Error: main image or watermark could not be loaded!");
$watermark_size = getimagesize($watermark_img);
$watermark_width = $watermark_size[0];
$watermark_height = $watermark_size[1];
$image_size = getimagesize($main_img);
$dest_x = $image_size[0] - $watermark_width - $padding;
$dest_y = $image_size[1] - $watermark_height - $padding;
// copy watermark on main image
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, $opacity);
// print image to screen
header("content-type: image/jpeg");
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);
?>
NOTE: I'm getting the image path from the database so I cannot hardcode the image filename as it's dynamic.
This is a bit mind-boggling if you're doing it for the first time, but once you see how it works it's really simple. ;)
You need one script that generates the image (e.g. image.php) and then your main script references that image (e.g. <img src="image.php">). It's not possible to have one request/script return both a document and an image simultaneously.
(PS. it's actually possible but it involves encoding the image as a very weird kind of src attribute. You don't want to do it, trust me.)
I believe you got confused about how this works: The watermark generating code above is not meant to be included in the page generating scripts/logic. Instead, it needs to be accessible behind it's own URL and then linked via <img src="./path/to/script"/> into the site you want to contain that image.
Put this script entirely separated from your "main website" script. On your website, use an <img> tag, with that watermarking script as the source.
You can't combine two different content-types like you're appearing to do. If you want a "web page" to appear, the content-type needs to be text/html. If you want just an image to appear, the content-type needs to be image/*.
Related
I have 2 different scripts for handling images:
The first one is a watermark script for watermarking images on the fly:
$imgpath=$_REQUEST['filename'];
header('content-type: image/jpeg');
$watermarkfile="assets/img/logo_variations/logo_watermark_75.png";
$watermark = imagecreatefrompng($watermarkfile);
list($watermark_width,$watermark_height) = getimagesize($watermarkfile);
$image = imagecreatefromjpeg($imgpath);
$size = getimagesize($imgpath);
$dest_x = ($size[0] - $watermark_width)/2;
$dest_y = ($size[1] - $watermark_height)/2;
imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);
So the image URL for a watermarked image is: http://example.com/watermark.php?filename=assets/img/temp/temp_share.jpg or since I'm using mod_rewrite to "pretty up" my URL: http://example.com/watermark/assets/img/temp/temp_share.jpg.
Works like a charm and my reason for doing so like this is because this is on a modeling website where I want to display the images without watermarks but I use a jquery script to change the image source of the image gets right clicked(assuming a user is trying to save the image).
The script only changes the source of any image with a class of img-protected.
I've written it to ignore any image with watermark in the URL so that it doesn't try to change the already watermarked image which would result in a url like: http://example.com/watermark/watermark/img.jpg which would result in a broken image. The other part is written to remove http://example.com from the original source so I don't end up with http://example.com/watermark/http://example.com/img.jpg.
$('.img-protected').on('mousedown', function (event) {
if (event.which == 3) {
if(this.src.indexOf("watermark") > -1) {
return false;
}
else {
src = this.src.replace('http://example.com/','');
this.src = 'http://example.com/watermark/' + src;
}
}
});
All of this works exceptionally well until I added another image handling script:
I'm using TimThumb.php which is an on the fly image resize script I use for creating gallery icons instead of uploading an icon and a full size image(this is how I wish to keep doing so as well).
The problem I am facing is this:
If I have an image that is being turned into a thumbnail using TimThumb.php which I renamed to thumb.php on my server the URL is http://example.com/thumb.php?src=gallery/goth/industrial_brick/5361ae7de9404.jpg&w=350&h=500a=c&s=1&f=11 which gives me an icon for 5361ae7de9404.jpg.
All of my icons have a class of img-protected which means on right click the above URL is going to be changed to the watermarked one.
This is where it fails.
The outputed URL when right clicked is http://example.com/watermark/http://www.example.com/thumb.php?src=gallery/goth/industrial_brick/5361ae7de9404.jpg&w=350&h=500a=c&s=1&f=11 which results in a broken image.
I manually tried making the URL into http://example.com/watermark/thumb.php?src=gallery/goth/industrial_brick/5361ae7de9404.jpg&w=350&h=500a=c&s=1&f=11 to see if that would change anything but it still results in a broken image.
What I need is to be able to also watermark the generated icons from thumb.php using watermark.php.
Is there a way to combine these two scripts or a workaround to make this work?
I'm at a complete loss here.
EDIT: I am fully aware that advanced users can still acquire the non watermarked image since it's already been downloaded to there device, but I don't expect a high volume of users to visit this particular website as this is simply a local models portfolio.
I have lots of jpeg images that are oversized (height, width), all with different sizes and different aspect ratios.
I'm showing them from a database like this:
<img src="<?php echo $img1; ?>" width="300" height="400">
What I'd like to have is some kind of php function to display a cropped version of the image like this:
cropjpeg('$img1');
For example, if the image is 600 W, 700 H, have php or GD show a cropped version around 300 W, 400 H starting from the top left hand of the image.
Some caveats:
I can't use CSS to do faux cropping. If you download this cropped image, it needs to be just that, the smaller cropped version.
I don't really want to create and save a new image, so I guess I need this to work "on the fly"
I tried imagecreatefromjpeg and imagejpeg, but it seems as though header('Content-Type: image/jpeg'); is not the right answer since there is more on the html page than just this 1 image
There is a lot of traffic on the site, so it has to tread lightly
Here's the best I found so far, but it uses the header('Content-Type: image/jpeg');
<?php
function cropjpeg($img, $x, $y, $width, $height,$grade=5)
{
// Create image instances
$src = imagecreatefromjpeg($img);
$dest = imagecreatetruecolor(400, 300);
// Copy
imagecopy($dest, $src, 0, 0, 20, 13, 400, 300);
// Output and free from memory
header('Content-Type: image/jpeg');
imagejpeg($dest);
imagedestroy($dest);
imagedestroy($src);
}
cropjpeg('images/bikini.jpg');
?>
Any ideas?
You cannot crop an image in the actual html page as it needs to be processed, that's if you don't want to save it on disk.
You can dump the crop script in a single PHP file with headers and call from HTML the script with path eg:
<img src="http://www.example.org/crop.php?i=bikini.jpg&x=13&y=20&w=400&h=300" alt="" />
and in script you can use
<?php
header('Content-Type: image/jpeg');
function cropjpeg($img, $x, $y, $width, $height,$grade=5) {
//......................
imagecopy($dest, $src, 0, 0, $x, $y, $width, $height);
//......................
}
cropjpeg('images/'.$_GET['i'], (int)$_GET['x'], (int)$_GET['y'], (int)$_GET['w'], (int)$_GET['h']);
?>
You should consider the aspect ratio, and search for a better crop script, you don't have to reinvent the wheel.
Use mod_rewrite to send requests for the relevant image file paths to a PHP script, which does the cropping and sends the image data back in response. It looks like a normal image tag on the page, but the images are really being served by your separate script.
The only issue is that you simultaneously don't want to save the cropped files, but have a lot of traffic so want to "tread lightly". You can't have both ways. If you don't want to re-crop the images on every request, you'll need to save the cropped versions so you can re-serve them on future requests.
Here is a page with a very complete tutorial with everything you need to do this using ajax included
crop with jquery and php
[http://www.skillcorp.com.ve][2]
[2]: http://www.skillcorp.com.ve here also more info relational
I have a simple facebook aplication. I have the index.php and the image.php which when accessed it creates an image with a random text on it(at least this is what i want to get from the script).
Here is the image.php:
http://pastebin.com/B4JhHcfj
The script is incomplete because i don't know how to get the text on the generated image.
Example: I access the image.php, i get a image with a random text on it.If i access again the link the same image with the random text on it will be shown.Thanks
Ok , you can use GD to watermark images , the complete script for watermarking :
<?php
header('content-type: image/jpeg');
$watermark = imagecreatefrompng('watermark.png');
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);
$image = imagecreatetruecolor($watermark_width, $watermark_height);
$image = imagecreatefromjpeg($_GET['src']);
$size = getimagesize($_GET['src']);
$dest_x = $size[0] - $watermark_width - 5;
$dest_y = $size[1] - $watermark_height - 5;
imagecopymerge($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height, 100);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);
?>
please note that , this script create watermarks on the fly , if you want to save watermarked image you must use imagejpeg() function with this way :
imagejpeg($image,'watermarked_img.jpg');
and you also use .htaccess to redirect all image request to your watermark.php,create .htaccess file and paste this code on it :
RewriteEngine on
RewriteRule ^([^thumb].*\.[jJ].*)$ watermark.php?src=$1
good luck.
I presume from your question, you have already included GD and that your PHP script generates the graphic using GD.
Firstly, you have to ensure that the required fonts are installed in the folder(s) where PHP will look for them.
Then, you should take a look at the following function, ImageTTFText:
http://php.net/manual/en/function.imagettftext.php
I did a PHP class to make it easier:
http://alvarotrigo.com/blog/using-php-gd-library-to-write-text-over-images-using-truetype-fonts/#comment-1048371709
It works with true type fonts (ttf) to be able to write text in big font sizes.
In PHP I'm trying to process an image, that is, I'm trying to make the surrounding color transparent in a jpg file. I'm using the GD library by the way.
I can directly output the image by converting it into a png using imagecreatefromjpeg and imagepng functions. But I can't find a way to make the specified color transparent. Also, some images have lighter gray artifacts around black graphics, created during saving. Is there any way I can include those as well?
I'm kind of lost. I found some answers to make a color transparent on an image but I don't know how to first convert the image without saving it into the server and then process it.
Any ideas?
EDIT: Here's my code so far. I managed to make a specified color transparent but I can't make it detect the surrounding one yet.
Most of the time images will be closed because they'l be logos or texts, saved in the allowed image formats. So I don't think I will have a major issue with gradients but it would be great if I could manage to manipulate transparency in the surrounding gradients, if any, such as drop shadows.
Is there also any way to detect if the png/gif image is already transparent? My code paints the transparent parts into black for those files now.
$file = 'images/18.jpg';
$specs = getimagesize($file);
if($specs[2] == 1) $img = imagecreatefromgif($file); //gif
elseif($specs[2] == 2) $img = imagecreatefromjpeg($file); //jpg
elseif($specs[2] == 3) $img = imagecreatefrompng($file); //png
else exit('unsupported file type!');
$newimg = imagecreatetruecolor(imagesx($img), imagesy($img));
// create a new image with the size of the old one
imagecopy($newimg,$img,0,0,0,0,imagesx($img),imagesy($img));
// copy the old one
imagedestroy($img);
// free the memory
$white = imagecolorallocate($newimg,255,255,255);
imagecolortransparent($newimg,$white);
// make white pixels transparent
header('Content-Type: image/png');
imagepng($newimg);
imagedestroy($newimg);
// and finally output the new image
You can set the transparent color with the imagecolortransparent function.
I have an image which i am going to be using as a background image and will be pulling some other images from the database that i want to show within this image. So if i am pulling only 1 image, i want the bottom part of the background image to close after the first image, if there are multiple images then i want it close after those images are shown. The problem with not using separate images is that the borders of the images have a design format and i cannot show them separately.
Take a look at this image . The design format of the right and left borders are more complicated than that to just crop them and use them. Any suggestions if there is any dynamic image resizing thing?
Yes there is. Look at the imageXXXX functions; the ones you are particularly interested in are imagecreate, imagecreatetruecolor, imagecreatefrompng, imagecopyresampled, imagecopyresized, and imagepng (assuming you're dealing with PNG images - there's similar load / save functions for jpeg, gif, and a few other formats).
You should try using the GD extension for PHP, especially have a look at imagecopyresized(). This allows you to do some basic image conversion and manipulation very easily.
A basic example that takes two GET parameters, resizes our myImage.jpg image and outputs it as a PNG image:
<?php
// width and height
$w = $_GET['w'];
$h = $_GET['h'];
// load image
$image = imagecreatefromjpeg('myImage.jpg');
// create a new image resource for storing the resized image
$resized = imagecreatetruecolor($w, $h);
// copy the image
imagecopyresized($resized, $image, 0, 0, 0, 0, $w, $h, imagesx($image), imagesy($image));
// output the image as PNG
header('Content-type: image/png');
imagepng($resized);
Have you tried PHPThumb? I used this class often and its pretty clean and lightweight. I used it here.