How about more cool things for Image helper?

[Dmitry A.]

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,
$radius) {
# Resize the Source Image
$srcResized = imagecreatetruecolor($dstw, $dsth);
imagecopyresampled($srcResized, $srcimg, 0, 0, $srcx, $srcy,
$dstw, $dsth, $srcw, $srch);
# Copy the Body without corners
imagecopy($dstimg, $srcResized, $dstx+$radius, $dsty,
$radius, 0, $dstw-($radius*2), $dsth);
imagecopy($dstimg, $srcResized, $dstx, $dsty+$radius,
0, $radius, $dstw, $dsth-($radius*2));
# 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(
array(0, 0, $radius, $radius),
array($dstw-$radius, 0, $dstw-$radius, $radius),
array(0, $dsth-$radius, $radius, $dsth-$radius),
array($dstw-$radius, $dsth-$radius, $dstw-$radius, $dsth-
$radius)
);
# Loop through each corner 'iteration'
foreach($iterations as $iteration) {
list($x1,$y1,$cx,$cy) = $iteration;
for ($y=$y1; $y<=$y1+$radius; $y++) {
for ($x=$x1; $x<=$x1+$radius; $x++) {
# If length (X,Y)->(CX,CY) is less then radius draw
the point
$length = sqrt(pow(($cx - $x), 2) + pow(($cy - $y),
2));
if ($length < $radius) {
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);
}
}

header('Content-type: image/jpeg');
imagejpeg($im);



What do you think?


DA.


--
Subscription settings: http://groups.google.com/group/in-portal-dev/subscribe?hl=en

[Alexander Obuhovich]

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]

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]

Of course they will be used all together with crop/resize and so on.

[Phil -- wbtc.fr --]

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....@gmail.com>

[Dmitry Andrejev]

Hi Phil,

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

Thanks.

[Phil -- wbtc.fr --]

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 <dand...@gmail.com>

[Dmitry A.]

Thanks Phil for sharing - we actually talking about completely rounded/
circled images or other eclipse style shapes.

Here is a task:

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.]

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.
>
> Here is a task:
>
> 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