I have been tasked with overlaying a photo on to a newspaper-esque image where the photo is of a person and they are meant to be the photo on the front of a newspaper.
I used codeigniter image library to watermark the template with the photo. It works fine but it distorts or removes some of the pixels in the photo when its overlayed
You can see it in the top left of the photo here-
I am also resizing the image up as its 500 px and the space for the image in the template is around 1400px
Here is the code i am using to overlay the image
private function overlay($template, $source_image)
{
echo $template;
// $config = array();
$config['source_image'] = $template;
$config['image_library'] = 'gd2';
$config['wm_type'] = 'overlay';
$config['wm_overlay_path'] = $source_image;
$config['wm_vrt_alignment'] = 'top';
$config['wm_hor_alignment'] = 'left';
$config['wm_hor_offset'] = '18px';
$config['wm_vrt_offset'] = '843px';
$config['quality'] = '100%';
$this->image_lib->initialize($config);
$result = $this->image_lib->watermark();
if($result){
return $result;
}
else
{
echo $this->image_lib->display_errors();
return false;
}
}
Since there was no answer i ended up using native php functions which worked.
imgpng has a 2nd parameter if you wish to saved the file to your server instead. Since they were being printed on a click of the button i just prompted a browser download
private function overlay2($template, $source_image)
{
$src = imagecreatefromjpeg($source_image);
$dest = imagecreatefrompng($template);
imagecopymerge($dest,$src, 90, 910, 0, 0, 1511, 1075, 100); //have to play with these numbers for it to work for you, etc.
header('Content-Disposition: Attachment;filename=newspaper.png');
header('Content-type: image/png');
imagepng($dest);
imagedestroy($dest);
imagedestroy($src);
}
i had the same problem.
Issue is on PNG 24 bits images.
Try to use PNG 16 bits to avoid the problem.
Maybe Gif image will work too (not tested).
Codeigniter image library is a nice class.
Related
I have a piece of code where I compress images via Codeigniter gd2 library. However, it turns this photo
into this one
because I set width and height in my code. However, when I remove these 2 lines, $config['quality'] property does not work. How can I solve this problem and save the actual size of the image compressing it?
Here is my code:
$image_datar = $this->upload->data();
$config['image_library'] = 'gd2';
$config['source_image'] = './assets/img/single_courses/'.$image_datar["file_name"];
$config['maintain_ratio'] = false;
$config['quality'] = '60%';
$config['width'] = '750';
$config['height'] = '500';
$config['new_image'] = './assets/img/single_courses/'.$image_datar["file_name"];
$this->load->library('image_lib', $config);
$this->image_lib->resize();
$post_image = $image_datar["file_name"];
It's a bit confusing what you are trying to accomplish even after reading the comments, and your code as it specifies the width. If you want it to be 750x500 by have the same ratio (so things don't look "compressed") than you should have $config['maintain_ratio'] = true; which generates:
If you just want to reduce the quality of the image so that the file size is smaller yet keep the same dimensions of the original image than one would think you can comment out the width and height of the config. However, in my testing that yielded the exact same file size as the original image, even when changing the quality down to 10%. Weird, bug? I confirmed this with filesize() and in my os!
Turns out not a bug, but a coded feature:
// If the target width/height match the source, AND if the new file name is not equal to the old file name
// we'll simply make a copy of the original with the new name... assuming dynamic rendering is off.
if ($this->dynamic_output === FALSE && $this->orig_width === $this->width && $this->orig_height === $this->height)
{
if ($this->source_image !== $this->new_image && #copy($this->full_src_path, $this->full_dst_path))
{
chmod($this->full_dst_path, $this->file_permissions);
}
return TRUE;
}
I've tried to figure out a way to get around this but that would require overwriting and messing with the libraries functionality. For now, and if your ok with your image being 1px less in width and height than the original, you can do something like:
$source = $this->frontend_image_upload_path . 'org/upload_original.jpg';
list($width, $height) = getimagesize($source);
$config['image_library'] = 'gd2';
$config['source_image'] = $source;
//$config['maintain_ratio'] = true;
$config['quality'] = '20%';
$config['width'] = $width - 1;
$config['height'] = $height - 1;
$config['new_image'] = $this->frontend_image_upload_path . 'org/new_image.jpg';
$this->load->library('image_lib', $config);
if (!$this->image_lib->resize()) {
echo $this->image_lib->display_errors();
}
I had used gd2 library to resize image.But some images got rotated by 90 degree after resized but not all image.I hadn't used any rotation.What may be the reason behind this?Do I need to set anything other configuration?
My code is here :
if(isset($_FILES) && !empty($_FILES)){
$item_images = $_FILES;
$this->load->library('upload');
$this->load->library('image_lib');
$config['upload_path'] = './temp/';
$config['allowed_types'] = '*';
$this->upload->initialize($config);
//print_r($item_images);
foreach($item_images as $ind=>$img_name){
if($this->upload->do_upload($ind)){
$data_image = $this->upload->data();
//for cropping
$config_crop['image_library'] = 'gd2';
$config_crop['source_image'] = $config['upload_path'] . $data_image['file_name'];
$config_crop['create_thumb'] = FALSE;
$config_crop['maintain_ratio'] = TRUE;
$config_crop['width'] = 300;
$config_crop['height'] = 300;
//$config_crop['rotation_angle'] = '0';
//$config_crop['x_axis'] = '100';
//$config_crop['y_axis'] = '40';
$this->image_lib->initialize($config_crop);
if ( ! $this->image_lib->resize())
{
echo $this->image_lib->display_errors();
}
}
$image_thumb = $this->s3_model->upload_image('thumb_'.$img_name['name'] ,$config['upload_path'] . $data_image['file_name']);
if($image_thumb){
$result = $this->s3_model->upload_image($img_name['name'] ,$img_name['tmp_name']);
//unlink($config['upload_path'] . $data_image['file_name']);
}
if(! $result){
$flag = false; //Error in uploading image.
break;
}
}
}
Do you have a OSx working machine?
In my case, a pic, that in my Mac was shown correctly, indeed was turned sideways, that is because OSX preview detects CellPhone orientation while the pic was taken....
The server not, neither windows machines... so that was driving me crazy...
Being or not this your case, you can use exif_read_data() function. This will give you orientation data if it exists on photo's metadata.
Check here: How to detect shot angle of photo, and auto rotate for website display like desktop apps do on viewing?
i have a helper function to add watermark to images
(i've made some changes to make the code shorter please ignore minor syntax errors or missing code)
function watermark($path_to_img , $image_name )
{
$ci = &get_instance();
$config['source_image'] = $path_to_img.$image_name;;
$config['new_image'] = $path_to_img.'wtr_'.$image_name;
$config['wm_type'] = 'overlay';
$config['wm_overlay_path'] = base_path('/files/transparent_bar.png');
$config['wm_font_path'] = base_path('application/assets/view/tahomabd.ttf');
$config['wm_font_size'] = '8';
$config['wm_font_color'] = 'ffffff';
$config['wm_vrt_alignment'] = 'bottom';
$config['wm_hor_alignment'] = 'left';
$config['quality'] = '100%';
$config['wm_hor_offset'] = '0';
$config['wm_vrt_offset'] = '0';
$ci->image_lib->initialize($config);
$ci->image_lib->watermark();
}
it works fine but it saves the watermarked version on server , i want to show/download it on the fly without saving it on the server or replacing the original image .... i've no idea how can i do this in codeigniter ?
something like :
$img = watermark($path_to_img , $image_name);
header("Content-type: image/jpeg");
echo ( $img );
You can still save it in a temp directory and have a code removing images older than a few minutes for example. Or harder, have a php script streaming out the image, e.g. the URL should be something like script.php?IMG=flower.jpg
http://thesitewizard.com/php/create-image.shtml for the second option above
Or
http://www.sitepoint.com/watermark-images-php/
To replace the source image, set source image path to new image.
$config['source_image'] = $path_to_img.$image_name;
$config['new_image'] = $path_to_img.$image_name;
I'm struggling to get the CodeIgniter Image Manipulation working correctly. Either it's a bug or I'm just not seeing it. I hope someone can help me with it. Thanks in advance!
On the script: I want to create thumbnails (176w x 132h). The input images are in different sizes and ratios. In order to always get this size I first resize them to fit the max width or height (depending on image orientation) and then crop in the center.
I've tried to do it all in 1 method. That didn't work, so I created two seperate methods.
resize_img()
and
crop_img().
When I run resize_img() on 3 different files, it works. If after that I use crop_img() on these thumbnails the 1th method created, it works. If I combine the two, or use them after one another, it doesn't.
I've tried $this->image_lib->clear();, unsetting the config files. I even created two config files, just to be sure.
I'm getting different all kind of errors from GD2, but the problem is, that after resize_img() creates the thumbnail, the crop_img() won't crop it. After that it all goes south, and the next images can't be opened. Write premissions are checked, both on folder and files.
Unable to save the image. Please make sure the image and file
directory are writable. The path to the image is not correct. Your
server does not support the GD function required to process this type
of image.
Full code:
<?PHP
class Imagetest extends MY_Controller {
function __construct()
{
parent::__construct();
$this->load->library('image_lib');
}
function index()
{
$testimg1 = 'uploads/test/1.png';
$testimg2 = 'uploads/test/2.png';
$testimg3 = 'uploads/test/3.png';
$this->resize_img($testimg1);
$this->crop_img($testimg1);
$this->resize_img($testimg2);
$this->crop_img($testimg2);
$this->resize_img($testimg3);
$this->crop_img($testimg3);
}
function image_thumb_name($img = null)
{
if(!empty($img)) {
$exploded = explode('.', $img);
return $exploded['0'] . '_thumb.' . $exploded['1'];
}
}
function get_axis($img)
{
// Default values
$output['x_axis'] = 0;
$output['y_axis'] = 0;
// Settings
$config['height'] = 132;
$config['width'] = 176;
if ($img_dim = getimagesize($img)) {
list($thumb_width, $thumb_height) = $img_dim;
} else {
echo '<h1> ERROR HERE TOO</h1>';
return false;
}
if ($thumb_width > $config['width']) {
$output['x_axis'] = (($thumb_width - $config['width']) / 2) ;
} else if ($thumb_height > $config['height']) {
$output['y_axis'] = (($thumb_height - $config['height']) / 2);
}
return $output;
}
function resize_img($img)
{
$config = array();
echo 'Processing: '. $img .'<br/>'; // Debug
if ($img_dim = getimagesize($img)) {
list($image_width, $image_height) = $img_dim;
} else {
echo '<h1> ERROR HERE </h1>';
}
// create a thumbnail
$config['image_library'] = 'GD2';
$config['source_image'] = $img;
$config['quality'] = 100;
$config['height'] = 132;
$config['width'] = 176;
$config['create_thumb'] = TRUE;
$config['maintain_ratio']= TRUE;
$config['master_dim'] = ($image_width > $image_height) ? 'height' : 'width';
$this->image_lib->initialize($config);
if (!$this->image_lib->resize()) {
echo $this->image_lib->display_errors();
}
echo '<img src="../'.$this->image_thumb_name($img).'" /> <br/>'; // Debug
$this->image_lib->clear();
unset($config);
}
function crop_img($img)
{
$config2 = array();
// Crop that thumbnail
$config2['image_library'] = 'GD2';
$config2['quality'] = 100;
$config2['height'] = 132;
$config2['width'] = 176;
$config2['source_image'] = $this->image_thumb_name($img);
$axis = $this->get_axis($config2['source_image']);
$config2['x_axis'] = $axis['x_axis'];
$config2['y_axis'] = $axis['y_axis'];
$config2['maintain_ratio'] = FALSE;
$config2['create_thumb'] = FALSE;
$this->image_lib->initialize($config2);
if (!$this->image_lib->crop()) {
echo $this->image_lib->display_errors();
}
echo '<img src="../'.$config2['source_image'].'" /> <br/>'; // Debug
$this->image_lib->clear();
unset($config2);
}
}
Got it!
I've set the create_thumb option to FALSE, and used the new_image parameter in the resize_img method. The effect is the same, but the built-in create_tumb function is not being used.
It's a bug IMHO, but it's working now :)
$config['create_thumb'] = FALSE;
$config['new_image'] = $this->image_thumb_name($img);
The problem is with your $config['source_image']
var_dump($config['source_image']);
see what you get.
If the file is in images folder in root folder, the $config['source_image] = 'images/'.$img.
Also make sure all the exploding functions returning the correct file name. (return and echo to check).
1st, eliminate file not found error. After that, see what error comes.
You can use Kodem's Image Resize Service. You can resize, crop any image with just a http call. Can be used casually in the browser or used in your production app.
I have a website going that takes a user's uploaded image, and makes three copies - a 'full' copy to print with (downsized to 1500x1125), a 'web' copy to display online (not coded yet), and finally a thumbnail.
So here's the code - _imageformat() is passed the parameters (which I've confirmed to be correct) from CI's Upload Class:
function _imageformat($fullpath, $shortpath, $width, $height)
{
// We now format the image.
// First, we check if it is landscape or portrait
if ($width >= $height) // It's landscape (or square)
{
// Now create the full printing image
$fullimage = $this->_resize('l', $fullpath, $shortpath, $width, $height);
}
else // It's portrait
{
// Now create the full printing image
$fullimage = $this->_resize('p', $fullpath, $shortpath, $width, $height);
}
}
function _resize($type, $fullpath, $shortpath, $width, $height)
{
// Set up the default Image Manipulation config options
$config['image_library'] = 'gd2';
$config['source_image'] = $fullpath;
$config['maintain_ratio'] = TRUE;
// Shave the '.jpg' from the end to append some nice suffixes we'll use
$newimage = substr($fullpath, 0, -4).'_full'.".jpg";
$config['new_image'] = $newimage;
if ($type == 'l') // If it's landscape
{
$config['width'] = 1500;
$config['height'] = 1125;
}
else if ($type == 'p') // If it's portrait
{
$config['width'] = 1125;
$config['height'] = 1500;
}
// Load the image library with the specified parameters, and resize the image!
$this->load->library('image_lib', $config);
$this->image_lib->resize();
// Create a thumbnail from the full image
$config['source_image'] = $newimage;
$config['new_image'] = substr($fullpath, 0, -9)."_thumb".".jpg";
$config['maintain_ratio'] = TRUE;
$config['width'] = 150;
$config['height'] = 150;
$this->load->library('image_lib', $config);
$this->image_lib->resize();
return $newimage;
}
What SHOULD happen: In my uploads folder, there are three images - the original uploaded file (we'll call it image.jpg), the resized file (named image_full.jpg), and the thumbnail (named image_thumb.jpg).
What DOES happen: In my uploads folder, there are only TWO images - the original uploaded file (image.jpg), and the resized file (image_full.jpg). No thumbnail is ever created.
What's interesting, however, ** is that if I place the code for the Thumbnail creation first, it generates the thumbnail image but **NOT the _full (resized) image.
So it appears to me that it won't ever run $this->image_lib->resize() twice. Why not? Is it some amateur mistake I'm making, or have I missed something obvious?! :P
Thanks!
Jack
Edit: I should point out that yes, I know I'm loading the image_lib library twice. I fathomed this was the only way of passing new parameters to it. I also tried, after resizing the full image, calling $this->_thumbnail() which loaded the library again there. But still the same issue occurred.
Edit 2: I've also tried using $this->image_lib->clear() - still no luck.
You should load the library only once and initialize it with different configs:
$this->load->library('image_lib');
// full image stuff
$this->image_lib->initialize($config);
$this->image_lib->resize();
// thumbnail stuff
$this->image_lib->initialize($config);
$this->image_lib->resize();