CONVERT HEADER INTO <img> - php

I'd like to show the image in this page using an <img> tag instead of an header ( header("content-type: image/jpeg"); ). any ideas?
<?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 = 50; // 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);
?>

This script generates an image, its output is an image, so you can use it in a tag, but in an other page:
<img src="image.php" /> <!-- (if image.php is the name of the script you posted) -->

<img src="yourscript.php"/>
or have your script output the image in some file and then use this file.

any ideas?
Don't do it. It is theoretically possible to embed images in HTML using data: URI's, but it has too many downsides and is usually a bad idea. The classical approach using an <img> tag that references the PHP script is the way to go.

you work with the ob_start() and ob_get_contents()
if($_GET['image'])
{
ob_start();
$main_img = "a.jpg"; // main big photo / picture
$watermark_img = "b.gif"; // use GIF or PNG, JPEG has no tranparency support
$padding = 3; // distance to border in pixels for watermark image
$opacity = 50; // 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);
$s = ob_get_contents();
ob_clean();
echo $s;
}
?>
[img src="echo '?image=1'?>"]
at the end you can in the src of image tage do this
echo '?image=1'

Related

image manipulation width and height setting

in my project i just do image watermarking or image combine it's working fine and code for that.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<?php
if(isset($_POST['submit']))
{
// Give the Complete Path of the folder where you want to save the image
$folder="uploads/";
move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], "$folder".$_FILES["fileToUpload"]["name"]);
$file='uploads/'.$_FILES["fileToUpload"]["name"];
$uploadimage=$folder.$_FILES["fileToUpload"]["name"];
$newname= time();
$ext = pathinfo($_FILES["fileToUpload"]["name"], PATHINFO_EXTENSION);
// Set the thumbnail name
$thumbnail = $folder.$newname.".".$ext;
$imgname=$newname.".".$ext;
// Load the mian image
if ($ext=="png" || $ext=="PNG") {
$source = imagecreatefrompng($uploadimage);
}
else if ($ext=="gif" || $ext=="GIF") {
$source = imagecreatefromgif($uploadimage);
}
else if ($ext=="bmp" || $ext=="BMP") {
$source = imagecreatefrombmp($uploadimage);
}
else{
$source = imagecreatefromjpeg($uploadimage);
}
// load the image you want to you want to be watermarked
$watermark = imagecreatefrompng('uploads/logo1.png');
// get the width and height of the watermark image
$water_width = imagesx($source)/2;
$water_height = imagesy($watermark);
// get the width and height of the main image image
$main_width = imagesx($source);
$main_height = imagesy($source);
$im_middle_w = $main_width/2;
$im_middle_h = $main_height/2;
// Set the dimension of the area you want to place your watermark we use 0
// from x-axis and 0 from y-axis
$dime_x = $im_middle_w - $water_width/2;
$dime_y = $im_middle_h - $water_height/2;
// copy both the images
imagecopy($source, $watermark, $dime_x, $dime_y, 0, 0, $water_width, $water_height);
// Final processing Creating The Image
imagejpeg($source, $thumbnail, 100);
unlink($file);
}
?>
<img src='uploads/<?php echo $imgname;?>'>
</body>
</html>
but problem with setting $water_width and i want set as half of my source image. but when i have source image of less width or more width compare to $water_width it's set it like that. see image when source image width is more.
and when width is less.
so my problem is how to set $water_width as half of source image width?
by Alex your answer it's came up like this.
This will resize watermark to half-width of original image and put it in the centre:
// load the image you want to you want to be watermarked
$watermark = imagecreatefrompng('uploads/logo1.png');
// get the width and height of the watermark image
$water_width = imagesx($watermark);
$water_height = imagesy($watermark);
// get the width and height of the main image image
$main_width = imagesx($source);
$main_height = imagesy($source);
// resize watermark to half-width of the image
$new_height = round($water_height * $main_width / $water_width / 2);
$new_width = round($main_width / 2);
$new_watermark = imagecreatetruecolor($new_width, $new_height);
// keep transparent background
imagealphablending( $new_watermark, false );
imagesavealpha( $new_watermark, true );
imagecopyresampled($new_watermark, $watermark, 0, 0, 0, 0, $new_width, $new_height, $water_width, $water_height);
// Set the dimension of the area you want to place your watermark we use 0
// from x-axis and 0 from y-axis
$dime_x = round(($main_width - $new_width)/2);
$dime_y = round(($main_height - $new_height)/2);
// copy both the images
imagecopy($source, $new_watermark, $dime_x, $dime_y, 0, 0, $new_width, $new_height);
// Final processing Creating The Image
imagejpeg($source, $thumbnail, 100);
imagedestroy($source);
imagedestroy($watermark);
imagedestroy($new_watermark);
You can try imagettftext method, if you don't want any such high perfection in transparency. You can have try of this code. You have to save a font file in your directory, here I used arial.ttf.
$im = imagecreatefrompng("png.png"); //create image data
$font = 'arial.ttf'; //font file name
$randomString = "example.com"; //string need to be shown
$main_width = imagesx($im); //finding width and height
$main_height = imagesy($im);
$posx= $main_width/2; //finding center
$posy = $main_height/2;
$color = imagecolorallocate($im, 200, 200, 200); //Creating color
$size = ($main_width/25)+1; //determine size of font. +1 to avoid 0
$temp = $size*5;
$posx = $posx-$temp; //adjust to average center
imagettftext($im,$size,0, $posx, $posy, $color, $font , $randomString); //apply a text
You have to adjust posx and posy for your text position. Size also can be adjusted with some logics.
$color = imagecolorallocate($im, 0, 0, 0);= black
and $color = imagecolorallocate($im, 255, 255, 255); = white.
You have to adjust this for your required text color.

How to add watermark on image before force download

I want to add force download functionality with the help of
$this->load->helper('download');
$photo_path = "uploads/default/photos/".$photo;
$name = $photo_name.'.jpg';
$data = file_get_contents($photo_path); // Read the file's contents
$name = $photo_name.'.jpg';
force_download($name, $data);
Now i want to add watermark image over the image before downloading the image.is this possible with image manipulation library or should i try to add watermark when uploading files.
Here's how you can add the watermark before sending it to force_download:
// Get the watermark from a file
$watermark = imagecreatefrompng('watermark.png');
$wmsize = getimagesize('watermark.png');
// Get your source image
$image = imagecreatefromjpeg($photo_path);
$size = getimagesize($photo_path);
// Set the watermark to be centered within the size of the destination image
$dest_x = ($size[0] - $wmsize[0]) / 2;
$dest_y = ($size[1] - $wmsize[1]) / 2;
// Copy the watermark over the original image
imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $wmsize[0], $wmsize[1]);
// Use output buffering to capture the output to send to force_download
ob_start(); //Stdout --> buffer
imagejpeg($image);
$img2 = ob_get_contents(); //store stdout in $img2
ob_end_clean(); //clear buffer
imagedestroy($image);
force_download($name, $img2);

Scaling a watermark to fit parent image

My photo sizes vary, they are either landscape, portrait or square, and I need to make a watermark the best fit for each photo - so I need to resize just the width of the watermark (without Imagick), as it's a long rectangle shape, so height doesn't matter.
I found the PHP function, imagecopyresized, but I'll be honest, I can't work out what parameters are needed for my situation, even after looking at PHP documentation! I'm also not sure if after using imagecopyresized, the rest of my function will work where it gets the watermark width and height.
Can somebody help me get over the finish line. This is how far I got, all it needs is the right parameters added to the imagecopyresized part:
<?php
header('content-type: image/jpeg');
$image = imagecreatefromjpeg('https://.....jpg');
$imageSize = getimagesize('https://.....jpg');
$newWatermarkWidth = $imageSize[0]-50; // width of image minus 50px
$watermark = imagecreatefrompng('watermark.png');
// resize watermark to newWatermarkWidth here with imagecopyresize
$watermark = imagecopyresized(?,?,?,?);
$watermark_width = imagesx($watermark);
$watermark_height = imagesy($watermark);
$dest_x = ($imageSize[0]/2) - ($watermark_width/2) ;
$dest_y = ($imageSize[1]/2) - ($watermark_height/2);
imagecopy($image, $watermark, round($dest_x,0), round($dest_y,0), 0, 0, $watermark_width, $watermark_height);
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);
?>
THIS IS WHAT I ENDED WITH & WORKS PERFECTLY
A script that adjusts the width of a watermark to fit across the whole parent image, centered and proportional.
<?php
header('content-type: image/jpeg');
$image = imagecreatefromjpeg('http://mydomain.com/myPhoto.jpg');
$imageSize = getimagesize('http://mydomain.com/myPhoto.jpg');
$watermark = imagecreatefrompng('http://mydomain.com/myWatermark.png');
$watermark_o_width = imagesx($watermark);
$watermark_o_height = imagesy($watermark);
$newWatermarkWidth = $imageSize[0]-20;
$newWatermarkHeight = $watermark_o_height * $newWatermarkWidth / $watermark_o_width;
imagecopyresized($image, $watermark, $imageSize[0]/2 - $newWatermarkWidth/2, $imageSize[1]/2 - $newWatermarkHeight/2, 0, 0, $newWatermarkWidth, $newWatermarkHeight, imagesx($watermark), imagesy($watermark));
imagejpeg($image);
imagedestroy($image);
imagedestroy($watermark);
This resizes the watermark and copies directly to the image.
You don't need the existing imagecopy line anymore.
$success = imagecopyresized($image, // Destination image
$watermark, // Source image
$imageSize[0]/2 - $newWatermarkWidth/2, // Destination X
$imageSize[1]/2 - imagesy($watermark)/2, // Destination Y
0, // Source X
0, // Source Y
$newWatermarkWidth, // Destination W
imagesy($watermark), // Destination H
imagesx($watermark), // Source W
imagesy($watermark)); // Source H

Passing value on img src $_GET issue

I am passing values from the img src like this:
PageA:
<img src="watermark.php?fname=<?php echo $image; ?>" />
then I ge the value on pageB:
$fname = $_GET['fname'];
$watermark_img = $passed_fname;
...
For some reason no image is showing ... I'm I missing something here?
Here is pageB full code:
<?php
$fname = $_GET['fname'];
$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
$watermark_img = $fname;
$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);
?>
Does $image contains some special characters?
Try to use PHP urlencode() function:
<img src="watermark.php?fname=<?php echo urlencode($image); ?>/>
And the, on the second page:
$fname = urldecode($_REQUEST['fname']);
If the value you pass on $fname is just the name, you might need to specify the full path.
$watermark_img = '/PATH_TO_THE_IMAGE/'.$fname;
Try the watermark PHP directly from the address bar, then view source. If there is any output before you set the jpeg header, the browser will be unable to deal with it. You might have something like
Error line 3443234
JPEGIMAGECODE
That first line makes it an invalid image.

Add text watermark to image watermark code

I am using an image watermark code that works great but I also need to add a text watermark to it.
Here is the code in full:
<?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);
?>
You can use imagestring() there are other image text function so checkout the manual for GD
imagestring($im, 1, 5, 5, 'A Simple Text String', $text_color);

Categories