# How about more cool things for Image helper?

2 views

### Dmitry A.

Apr 21, 2010, 7:19:23 PM4/21/10
to In-Portal Development Team
Hi guys,

I have came across the idea of being able to improve our current Image
helper (already powerful tool) and teach new things like create new
version of the image:

- Rounded
- Grayscale

I have did a little search around and found some sample code:

1. Converting to Rounded
======================
function imageRoundedCopyResampled(&\$dstimg, &\$srcimg, \$dstx, \$dsty,
\$srcx,
\$srcy, \$dstw, \$dsth, \$srcw, \$srch,
# Resize the Source Image
\$srcResized = imagecreatetruecolor(\$dstw, \$dsth);
imagecopyresampled(\$srcResized, \$srcimg, 0, 0, \$srcx, \$srcy,
\$dstw, \$dsth, \$srcw, \$srch);
# Copy the Body without corners
# Create a list of iterations; array(array(X1, X2, CenterX,
CenterY), ...)
# Iterations in order are: Top-Left, Top-Right, Bottom-Left,
Bottom-Right
\$iterations = array(
);
# Loop through each corner 'iteration'
foreach(\$iterations as \$iteration) {
list(\$x1,\$y1,\$cx,\$cy) = \$iteration;
# If length (X,Y)->(CX,CY) is less then radius draw
the point
\$length = sqrt(pow((\$cx - \$x), 2) + pow((\$cy - \$y),
2));
imagecopy(\$dstimg, \$srcResized, \$x+\$dstx, \$y+
\$dsty,
\$x, \$y, 1, 1);
}
}
}
}
}

2. Converting to Grayscale
======================
\$source_file = "test_image.jpg";

\$im = ImageCreateFromJpeg(\$source_file);

\$imgw = imagesx(\$im);
\$imgh = imagesy(\$im);

for (\$i=0; \$i<\$imgw; \$i++)
{
for (\$j=0; \$j<\$imgh; \$j++)
{

// get the rgb value for current pixel

\$rgb = ImageColorAt(\$im, \$i, \$j);

// extract each value for r, g, b

\$rr = (\$rgb >> 16) & 0xFF;
\$gg = (\$rgb >> 8) & 0xFF;
\$bb = \$rgb & 0xFF;

// get the Value from the RGB value

\$g = round((\$rr + \$gg + \$bb) / 3);

// grayscale values have r=g=b=g

\$val = imagecolorallocate(\$im, \$g, \$g, \$g);

// set the gray value

imagesetpixel (\$im, \$i, \$j, \$val);
}
}

imagejpeg(\$im);

What do you think?

DA.

--

### Alexander Obuhovich

Apr 22, 2010, 8:06:44 AM4/22/10
1 - could be a better solution, which does this:
• draws white square based on source image dimensions
• cuts circle from the midle
• places original image under prepared image so only image part, that fits the hole is visible
This approach will use standard GD function, like "imagefilledellipse" and so on.

2 - ok
--
Best Regards,

http://www.in-portal.com
http://www.alex-time.com

### Dmitry Andrejev

Apr 22, 2010, 8:30:57 AM4/22/10
Thanks for a valid point.

Yes, totally make sense for #1.

Question, what do we do if we have to resize it first or some other operation. I guess these type of effects should be applied at the end of Image processing, agreed?

DA.

### Alexander Obuhovich

Apr 22, 2010, 4:50:02 PM4/22/10
Of course they will be used all together with crop/resize and so on.

### Phil -- wbtc.fr --

Apr 23, 2010, 5:18:30 AM4/23/10
Hi guys,

I've done the same thing as Alexander talks, putting image into a frame with rouded corners (but using CSS and not PHP), but the resulst is nice only if the image have a white background.

If Dmitry's tool really round image corners, then it's definitivly better.

P.

2010/4/22 Alexander Obuhovich

### Dmitry Andrejev

Apr 23, 2010, 11:09:39 AM4/23/10
Hi Phil,

Please share with us the CSS version of the rounded image.

Thanks.

### Phil -- wbtc.fr --

Apr 23, 2010, 11:48:19 AM4/23/10
Hi Dmitry,

maybe I haven't been clear, I've just put a frame around photos (fixed size of course), then it's just a background, and not a CSS/JS thing, you can see it here : http://www.sexycenter-online.fr/ there is the inportal category image + background.

But this works only with white background images, if your solution work for all sizes and direclty make rounded corners for image, it's definitively better.

Phil.

2010/4/23 Dmitry Andrejev

### Dmitry A.

Apr 26, 2010, 8:57:29 AM4/26/10
to In-Portal Development Team
Thanks Phil for sharing - we actually talking about completely rounded/
circled images or other eclipse style shapes.

714: Add ability to generate "Rounded" and "Grayscale" images

http://tracker.in-portal.org/view.php?id=714

DA.

On Apr 23, 10:48 am, "Phil -- wbtc.fr --" <p...@wbtc.fr> wrote:
> Hi Dmitry,
>
> maybe I haven't been clear, I've just put a frame around photos (fixed size
> of course), then it's just a background, and not a CSS/JS thing, you can see
> it here :http://www.sexycenter-online.fr/there is the inportal category
> image + background.
>
> But this works only with white background images, if your solution work for
> all sizes and direclty make rounded corners for image, it's definitively
> better.
>
> Phil.
>
> 2010/4/23 Dmitry Andrejev <dandre...@gmail.com>
>
>
>
> > Hi Phil,
>
> > Please share with us the CSS version of the rounded image.
>
> > Thanks.
>
> > On Fri, Apr 23, 2010 at 4:18 AM, Phil -- wbtc.fr -- <p...@wbtc.fr> wrote:
>
> >> Hi guys,
>
> >> I've done the same thing as Alexander talks, putting image into a frame
> >> with rouded corners (but using CSS and not PHP), but the resulst is nice
> >> only if the image have a white background.
>
> >> If Dmitry's tool really round image corners, then it's definitivly better.
>
> >> P.
>
> >> 2010/4/22 Alexander Obuhovich <aik.b...@gmail.com>
>
> >> Of course they will be used all together with crop/resize and so on.
>
> >>> On Thu, Apr 22, 2010 at 3:30 PM, Dmitry Andrejev <dandre...@gmail.com>wrote:
>
> >>>> Thanks for a valid point.
>
> >>>> Yes, totally make sense for #1.
>
> >>>>  Question, what do we do if we have to resize it first or some other
> >>>> operation. I guess these type of effects should be applied at the end of
> >>>> Image processing, agreed?
>
> >>>> DA.
>
> >>>> On Thu, Apr 22, 2010 at 7:06 AM, Alexander Obuhovich <
> >>>> aik.b...@gmail.com> wrote:
>
> >>>>> 1 - could be a better solution, which does this:
>
> >>>>>    - draws white square based on source image dimensions
> >>>>>    - cuts circle from the midle
> >>>>>    - places original image under prepared image so only image part,
> >>>>>    that fits the hole is visible
>
> >>>>> This approach will use standard GD function, like "imagefilledellipse"
> >>>>> and so on.
>
> >>>>> 2 - ok
>

### Dmitry A.

May 9, 2010, 12:50:00 AM5/9/10
to In-Portal Development Team
This has been implemented and patch is available for 5.1.0.

DA.

On Apr 26, 7:57 am, "Dmitry A." <dandre...@gmail.com> wrote:
> Thanks Phil for sharing - we actually talking about completely rounded/
> circled images or other eclipse style shapes.
>
>
> 714: Add ability to generate "Rounded" and "Grayscale" images
>
> http://tracker.in-portal.org/view.php?id=714
>
> DA.
>
> On Apr 23, 10:48 am, "Phil -- wbtc.fr --" <p...@wbtc.fr> wrote:
>
>
>
> > Hi Dmitry,
>
> > maybe I haven't been clear, I've just put a frame around photos (fixed size
> > of course), then it's just a background, and not a CSS/JS thing, you can see
> > it here :http://www.sexycenter-online.fr/thereis the inportal category