I want to create two thumbnails from the same source image. The following code only makes my first thumbnail, but will not create the second one. Why is that? Is it because the config array is passed into the constructor and an object cannot be instantiated twice?
$config['image_library'] = 'gd2';
$config['source_image'] = $fullPath;
$config['create_thumb'] = true;
$config['maintain_ratio'] = true;
$config['width'] = 256;
$config['height'] = 256;
$config['master_dim'] = 'width';
$config['thumb_marker'] = IMAGE_LARGE;
$this->load->library('image_lib', $config);
$this->image_lib->resize();
$config['width'] = 128;
$config['height'] = 128;
$config['thumb_marker'] = IMAGE_SMALL;
$this->load->library('image_lib', $config);
$this->image_lib->resize();
Image resizing and cropping can take up a lot of repetitive code. I added an image library to the Wiki that I use to create thumbs and resized versions of images (square or not).
By default, images are squared from the center, but this can be offset, too.
Example usage:
function image ()
{
$original = 'test_image.jpg';
$new = 'test_image_altered.jpg';
$originalPath = '/full/path/to/original/image/folder/';
$newPath = '/full/path/to/altered/image/folder/';
$maxSize = 150;
$this->load->library('images');
// Create square and resized image example
$this->images->squareThumb($originalPath . $original, $newPath . $new, $maxSize);
// Create resized image example
$this->images->resize($originalPath . $original, $maxSize, $maxSize, $newPath . $new);
// Create square image image
$this->images->square($originalPath . $original, $newPath . $new);
}
Let me know what you think. Here’s the URL:
http://codeigniter.com/wiki/Category:Libraries::Images/
Hello,
how do I use the image lib to resize images stored in a folder?
folders
img
System
Application
foreach ($query->result() as $row)
{
echo $row->imagePath;
}
I tried
$config['image_library'] = 'gd2';
$config['source_image'] = '/img/'.$row->imagePath;
$config['create_thumb'] = TRUE;
$config['maintain_ratio'] = TRUE;
$config['width'] = 75;
$config['height'] = 50;
$this->load->library('image_lib', $config);
$d = $this->image_lib->resize();
echo $d;
Thanks
Hi,
Part of my forum is a wallpaper section.
When I attach an image it is being resized - meaning if I have a 2000x1800 Wallpaper and attach it - then click on the Thumbnail - then click on the fashbox - it will give me a very resized image in the actual browser,
Where can I change that?
BTW: if I set my resize to no in the admincp - I cannot attach images via the new attachment system.
I can select the image to upload - then it uploads - but when finished and before I have to click insert image it shows a red X beside the image that I tried to upload.
I'm working off an unmodified copy of SB 3.0.1
I've got a full-sized image that exceeds the viewport slightly, but the script doesn't seem to be resizing it all. I've tried tossing in the handleOversize: "resize", but no luck.
According to the demo on the homepage, there should be dynamic resizing of large images -- hey that's the point of having that tiger image up there in the first place, eh? To show drag, resize, and clip. Well, this is not happening. 
Thoughts? Suggestions?
Hello,
I am using to external images to place one on top of the other but its not working correctly
This image is to be on top: http://www.everyday-taichi.com/image...utube-play.jpg
This Image is to be on the bottom: http://img.youtube.com/vi/7Lfyk9yQPYk/default.jpg
This is what I have so far but its like cutting away at the images: http://JneroCorp.com/test.php
Here is the code I have:
Code:
<?php
$src = imagecreatefromjpeg( 'http://img.youtube.com/vi/7Lfyk9yQPYk/default.jpg' );
$dst = imagecreatefromjpeg( 'http://www.everyday-taichi.com/image-files/youtube-play.jpg' );
imagecopymerge( $dst, $src, 1, 1, 0, 0, 200, 200, 80 );
header( 'Content-type: image/jpeg' );
imagejpeg( $dst );
imagedestroy( $src );
imagedestroy( $dst );
?>
Code for getting images from iPhone Image Album:
var a = Titanium.UI.createAlertDialog({title:'Image Pickert',message:'Do you want to select an image',buttonNames:['Yes','No']});
a.show();
a.addEventListener('click',function(e){
if (e.index == 0){
Titanium.Media.openPhotoGallery({
success: function(image,details){
$("#img1").attr('src',image.url);
},
error: function(error){
},
cancel: function()
{
},
allowImageEditing:true
});
}else{
//$("#img1").attr('src','default_app_logo.png');
document.getElementById("img1").setAttribute("src","default_app_logo.png");
document.getElementById('img1').onclick=function(){
Titanium.UI.currentWindow.fireEvent('yahoo.open',{eventData:'blah'});
};
}
});
I discovered the problem with this image, and why I was getting browser-based resizing (leading to scrollbars) instead Shadowbox's resizing engine...
The image ended with an uppercase .JPG extension instead of a lowercase .jpg
An uppercase extension will break the resizing script.
hi
i am trying to resize an image to thumbnail size. the code below is working. but the problem with this is when my image is resizes to thumbnail size then its quality gets bad. so how can i maintain the quality of the image after resizing it?
Code:
<?php
function imagetothumb($imagename, $extension) {
$save = "thumb/".$imagename;
$filename = $imagename;//'image.jpg';
$percent = 0.05;
//$width = 50;
//$height = 50;
header('Content-type: image/'.$extension);
list($width, $height) = getimagesize($filename);
$newwidth = $width * $percent;
$newheight = $height * $percent;
$thumb = imagecreatetruecolor($newwidth, $newheight);
$source = imagecreatefromjpeg($filename);
imagecopyresized($thumb, $source, 0, 0, 0, 0, $newwidth, $newheight, $width, $height);
imagejpeg($thumb,$save,100);
}
function getExtension($str) {
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
$imagename = "image3.jpg";
$ext = getExtension($imagename);
$ext = strtolower($ext);
//imageresizer($imagename,$ext);
imagetothumb($imagename,$ext);
?>
Ok so I used the following code in my Frontpage website
Code:
<html>
<head>
<title>Europa Hotel - Belfast, Northern Ireland</title>
<meta name="author" content="John Cunningham">
<meta name="copyright" content="John Cunningham">
<meta name="keywords" content="">
</STYLE>
<script type="text/javascript" src="ieupdate.js"></script>
<script language="JavaScript1.2">
<!--
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.avail Height);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.wi ndow.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin:0px;}
#bg_image {
width: 100%;
height: 100%;
left: 0px;
top: 0px;
position: absolute;
z-index: 0;
}
#contents {
z-index: 1;
position: absolute;
}
</style>
</head>
<body>
<div id="bg_image">
<img src="images/index.png" style="width: 100%; height: 100%;">
</div>
<div align="center" id="contents">
<table width="100%" height="100%" border="0">
<tr align="center" valign="middle">
<td bgcolor="">
<script type="text/javascript">startIeFix();</script>
</table>
</div>
<script type="text/javascript">endIeFix();</script>
</SCRIPT>
</body>
</html>
This allows the background image to adjust according to the users screen resolution. However it will not let me place any pictures on the same page as they disappear. I have tried moving them around in front of the bg image code and below it but nothing works. So any ideas on how to add images above the bg image and have them adjust themselves according to screen resolution as well???
This script created a cropped version of the image as thumbnail instead of a resized version. I tried to change it to show resized images but still not working. Please someone can check this script. Thank in advance.
JavaScript
Code:
<style media="screen,projection" type="text/css">
/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }
/* begin gallery styling */
#jgal { list-style: none; width: 200px; }
#jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
#jgal li img { height:60px; width:auto; }
#jgal li img { position: absolute; top: 160px; right: 480px;width: 400px; height: 400px; display: none; }
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
</style>
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
<script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
<script type="text/javascript">
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
enlargedImg = document.createElement(img);
document.getElementById(jgal).parentNode.insertBefore(enlargedImg,document.getElementById(jgal).nextSibling);
enlargedImg.src = li[0].getElementsByTagName(img)[0].src;
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].style.backgroundRepeat = 'no-repeat';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
enlargedImg.src = this.getElementsByTagName(img)[0].src;
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
</script>
HMTL
Code:
<ul id="gallery">
<li><img src="image1/fashion/elagant.JPG" alt="Josef & Erika 1"></li>
<li><img src="image1/fashion/bling.JPG" alt="Roland Ads"></li>
<li><img src="image1/fashion/papawemba.jpg" alt="Papa wemba"></li>
<li><img src="image1/fashion/Debo_sape.JPG" alt="CD Cover 1"></li>
<li><img src="image1/fashion/Fabulous.jpg" alt="Josef & Erika 3"></li>
<li><img src="image1/fashion/pinkman.jpg" alt="Josef & Erika 2"></li>
<li><img src="image1/fashion/smoking.jpg" alt="LKTRD Poster"></li>
<li><img src="image1/fashion/shoes.jpg" alt="Josef & Erika 4"></li>
<li><img src="images/inside_1.jpg" alt="Inside Magazine"></li>
<li><img src="images/oceanen_4.jpg" alt="Oceanen"></li>
</ul>
I'm coding my new website, and to save bandwidth, i'm letting users link to their own avatars, so I want to resize any images over 150px wide so it doesn't mess up my layout - simple, right? Well, you'd think so, but I don't know any javascript, so i've scrapped this together with what little I know:
Code:
var obj=document.getElementsByTagName("img");
for(var i=0;i<obj.length;i++){
if(obj[i].className == "avatar") {
if(getElementWidth(obj[i]) > 150) {
obj[i].style.width = 150;
}
}
}
Can anyone help me fix that or code me a new one please? I need it to check all elements (well, images - but only images will be using it) for a width of over 150px, and, if it is - change it to 150px
I know it's pretty simple but it's hurting my head! :P
Thanks in advance :D
-Alux
Hello
Anyone can please help me, I want some good script and method for resizing an image at upload time. I have found few that resize to the browser, but I want to do this for Avatars. So someone could upload 500kb big picture, but it reduce the physical size around 150px150px.
Thanks in Advance
Hello again guys,
I have a code here that's suppose;
1. Save the image in "/uploads" directory.
2. If the image is saved, it will find the file to make a thumbnail version of it and save to "/uploads/thumbs" directory.
I have it running successfully in saving the image in the /uploads directory but can't seem to find the error why it is not saving the thumbnail version under /upload/thumbs directory. Please help.
The code.
function do_upload()
{
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '100';
$config['max_width'] = '1024';
$config['max_height'] = '768';
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload())
{
$error = array('error' => $this->upload->display_errors());
$this->load->view('upload_form', $error);
}
else // when file is uploaded, start making thumbnails
{
//$data = array('upload_data' => $this->upload->data());
$data = array('upload_data' => $this->upload->data());
// load image library
$this->load->library('image_lib');
// set arrays
$config2['image_library'] = 'gd';
$config2['source_image'] = '/uploads/' . $data['upload_data']['file_name'];
$config2['create_thumb'] = TRUE;
$config['new_image'] = '/uploads/thumbs/' . $data['upload_data']['file_name'];
$config2['maintain_ratio'] = TRUE;
$config2['width'] = 75;
$config2['height'] = 50;
$this->load->library('image_lib', $config2);
$this->image_lib->resize();
$this->load->view('upload_success', $data);
}
}
Images showing a background border when resizing….....and resizing not doing correctly…........
Model Upload and Resize function
function do_user_upload($field)
{
$config['upload_path'] = './uploads/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '0';
$config['max_width'] = '0';
$config['max_height'] = '0';
//print_r($config);
$this->load->library('upload', $config);
if ( ! $this->upload->do_upload($field))
{
$error = array('error' => $this->upload->display_errors());
echo $this->upload->display_errors() ;
}
else
{
$data = array('upload_data2' => $this->upload->data());
//print_r($data);
unset($config);
$config['image_library'] = 'gd2';
echo "image name is".$data['upload_data2']['file_name'];
$config['source_image'] = './uploads/'.$data['upload_data2']['file_name'];
// $config['create_thumb'] = TRUE;
$config['maintain_ratio'] = TRUE;
$config['width'] = 544;
$config['height'] = 256;
$config['quality'] = 100;
$config['master_dim'] = 'auto';
//print_r($config);
$this->load->library('image_lib', $config);
$dataresize = $this->image_lib->resize();
print_r($dataresize);
// echo var_dump(gd_info());
// $datas = array('message' =>var_dump($this->upload->data()));
// $datas = array('resize_data' => $this->image_lib->resize());
$datas = array('upload_data2' => $this->upload->data());
// $logo = $data['upload_data']['file_name'];
// echo $logo;
//rename($data['full_path'],'./uploads/'.$newimagename);
//$pic = realpath('./uploads/'.$newimagename);
unset($config);
$this->image_lib->clear();
return $datas;
}
}
********************Call from Controller Page*******************
if($_FILES['fileToUpload']['error'] < 1 )
{
$field_name = "fileToUpload";
$datas = $this->user_createcoupon_model->do_user_upload($field_name);
$userimage = $datas['upload_data2']['file_name'];
}
*********************************************************************************
But this resize function dont affecting the image size…..i dont know why this….thre is allready another function for to upload and watermark….......please give me an idea….......
Problem with reloading image resource after resizingMar 4, 2010 Hi, I have a problem with Image resource. I'm currently in development mode and I try different design for my website. In my website (in GWT 2.0) I integrate Image, but when I resize image (with Gimp), impossible for GWT to take account the new...
Can't save image-album_id and image-name after file-upload to server.Mar 7, 2010 I've been trying to save some details of my image to the database. This is what I'm doing: (the upload works, but image-name and image- album_id don't get inserted in the database) Form: <?php echo $form->create('Image', array('type'…
Get Image Width and Height in pixels while uploading Image FileNov 22, 2009 I want to allow my users to upload their photo which I am storing into database. I want to restrict user to upload the image size of not more than 80px by 80 px and 10 kb. How can I restrict user to upload image size not more than 80px by 80 px...
Does Image not serialize? How to transfer image back to client?Feb 10, 2010 Hello everybody, I am new to GWT and want to have a service that transfers an Image object (com.google.gwt.user.client.ui.Image) back to the client. (Using GWT 2.0.0 with Eclipse Galileo and Eclipse GWT plugin). On the client, I have the...
Using an action to generate an image as an image tag src attributeJan 28, 2010 Hi guys, I am probably missing something obvious but is it possible for me to pass in an img tags src attribute the url to an action that will then output a dynamically generated image? Example: Instead of a direct link to an image like <?php...
[Fwd: [Fwd: Re: Conversion of CMYK Image into RGB Image]]Nov 23, 2009 Hi Jeremias, I have created CMYK color images with *.tif extension, but failed to create the same image as GIF,JPEG. The Corel Photo Paint X4 converting CMYK color space to default RGB color space when saving as GIF and JPEG etc. Could you please...
[Fwd: Re: Conversion of CMYK Image into RGB Image]Nov 23, 2009 Hi Jeremias, I have created CMYK color images with *.tif extension, but failed to create the same image as GIF,JPEG. The Corel Photo Paint X4 converting CMYK color space to default RGB color space when saving as GIF and JPEG etc. Could you please...
How to tie Image and Label together so when I move Image then Label will follow it??Nov 18, 2009 I modify the AbstractConnectinExample so make the diagram have Image and label.. but I dont know how to tie them up so that both of it can move together. [code] protected UIObjectConnector createConnector(String text, int left, int top, Direction...
image mapNov 16, 2009 Hi! Is there any convenient way to add image map to application?
Image Manipulation using PHPDec 10, 2009 Hello all , I have been searching on internet for some simple functions that may help me in manipulating images automatically. While searching I came across a nice article containing some sample codes of manipulating images like reducing size,...
An Image to Start 2010 With a Big Smile [Image Cache] Jan 1, 2010 It's So Big [Image Cache] Dec 5, 2009 What Is This? [Image Cache] Dec 18, 2009 What Is This? [Image Cache] Jan 12, 2010 What Are These Guys Looking At? [Image Cache] Nov 23, 2009 Generations [Image Cache] Jan 12, 2010 Magnetism! [Image Cache] Jan 14, 2010 Google Image Swirl ReviewNov 23, 2009 Too Much AT&T Fail [Image Cache] Dec 7, 2009 A Map of China... [Image Cache] Jan 14, 2010
|
