In-Portal Issue Tracker - In-Portal CMS
Viewing Issue Advanced Details
ID: Category: Type: Reproducibility: Date Submitted: Last Update:
714 [In-Portal CMS] Other feature request always 2010-04-26 07:54 2010-08-31 14:13
Reporter: Dmitry Platform:  
Assigned To: alex OS:  
Priority: normal OS Version:  
Status: needs work Product Version: 5.1.0  
Product Build: Resolution: open  
 
ETA: none Fixed in Version:  
Reference: http://groups.google.com/group/in-portal-dev/browse_thread/thread/15ce50b668312efb
Change Log Message: Ability to generate "Rounded" and "Grayscale" images on the fly
Estimate Points: 0
Summary: 0000714: Add ability to generate "Rounded" and "Grayscale" images
Description: Improve our current Image helper (already powerful tool) and teach new things like create new version of the image:

- Rounded
- Grayscale
Steps To Reproduce:
Additional Information: 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);
                }
            }
        }
    }
}

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. 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);
Relationships
Attached Files: patch rounded_grayscale_images.patch (9,060) 2010-05-06 15:15
http://tracker.in-portal.org/file_download.php?file_id=528&type=bug
patch radius_grayscale_image.patch (9,424) 2010-05-20 12:09
http://tracker.in-portal.org/file_download.php?file_id=573&type=bug
Issue History
Date Modified Username Field Change
2010-08-31 14:13 alex version => 5.1.0
2010-05-31 01:51 alex Note Added: 0002342
2010-05-30 19:01 Dmitry Note Added: 0002337
2010-05-30 16:36 Dmitry Note Added: 0002336
2010-05-30 16:36 Dmitry Status needs feedback => needs work
2010-05-24 02:40 alex Note Added: 0002307
2010-05-23 19:51 Dmitry Note Added: 0002302
2010-05-20 12:11 alex Note Added: 0002270
2010-05-20 12:09 alex File Added: radius_grayscale_image.patch
2010-05-19 16:06 Dmitry Note Added: 0002268
2010-05-19 16:06 Dmitry Status needs testing => needs feedback
2010-05-06 15:15 Dmitry File Added: rounded_grayscale_images.patch
2010-05-06 15:14 Dmitry File Deleted: rounded_grayscale_images.patch
2010-05-06 14:58 Dmitry Note Edited: 0002069 bug_revision_view_page.php?bugnote_id=0002069#r479
2010-05-06 14:57 Dmitry File Added: rounded_grayscale_images.patch
2010-05-06 14:57 Dmitry File Deleted: rounded_grayscale_images.patch
2010-05-06 14:57 Dmitry Note Edited: 0002069 bug_revision_view_page.php?bugnote_id=0002069#r478
2010-05-06 14:47 Dmitry Note Added: 0002069
2010-05-06 14:47 Dmitry Assigned To => alex
2010-05-06 14:47 Dmitry Developer => Dmitry
2010-05-06 14:47 Dmitry Status active => needs testing
2010-05-06 14:47 Dmitry File Added: rounded_grayscale_images.patch
2010-04-26 07:56 Dmitry Change Log Message => Ability to generate "Rounded" and "Grayscale" images on the fly
2010-04-26 07:54 Dmitry New Issue
2010-04-26 07:54 Dmitry Reference => http://groups.google.com/group/in-portal-dev/browse_thread/thread/15ce50b668312efb

Notes
(0002069)
Dmitry   
2010-05-06 14:47   
(edited on: 2010-05-06 14:58)
Please test.

Patch is build from 5.1.x (May-6-2010).

1. Using format to get Rounded corners:

rounded:100|#FFFFFF


2. Using format to get Image Circled:

rounded:100%x100%|#FFFFFF (for percentage or rounded:100x100 (for pixels)
(0002268)
Dmitry   
2010-05-19 16:06   
Please attach your version of the patch for review.
(0002270)
alex   
2010-05-20 12:11   
Reminder sent to: Dmitry

Here it is "radius_grayscale_image.patch".

I haven't tested it myself, but new syntax is:

<inp2:prefix_Field name="ImageFile" format="corner_radius:5;fill:#FFFFAA"/>

<inp2:prefix_Field name="ImageFile" format="ellipse_radius:5x10;fill:#FFFFAA"/>
<inp2:prefix_Field name="ImageFile" format="ellipse_radius:5;fill:#FFFFAA"/>

Maybe "fill" format won't be working as expected.
(0002302)
Dmitry   
2010-05-23 19:51   
Reminder sent to: alex

What if want have Percentage from width and/or height when using "ellipse_radius".

In my example it was - rounded:100%x100%|#FFFFFF

Also I didn't get your comment about the FILL param there.
(0002307)
alex   
2010-05-24 02:40   
You can specify percents as well.

About "fill" parameter: try my samples and verify, that "fill" really fills proper image parts, not whole image.
(0002336)
Dmitry   
2010-05-30 16:36   
There are several issues with your patch:

1. when I use FILL in format (ie. fill:#555555) it always puts black instead the proper color.

2. when I use FILL in format it always fills in the empty space with color (due to bug below it's black), while in some cases I do NOT want it. I believe we should NOT mix these 2 FILL options into 1.

3. FILL color param should be built-in into CRC when we generate Image ending-name otherwise image remains the same when it changes.


To be honest while my code was a bit rusty it worked well in all these scenarios.
(0002337)
Dmitry   
2010-05-30 19:01   
Let's finalize and put this in 5.1.0. I really see no point of leaving this behind especially if we have 5.2.0 targeted for PHP5.

Thanks.
(0002342)
alex   
2010-05-31 01:51   
Of course it's buggy, since I haven't time to test it myself because you've forced me to attach what I have now in task.