strange black line in an image

[MMDE]

This is kind of weird, I've tried to figure out what is wrong for a while now, but I really can't seem to figure it out.

My script does seem to work with the values I think it works with, but that might be where the error is.

I've messed around a lot with it, but I still can't seem to understand what the problem is...

I do realize I can just use the filledrectangle function instead of creating a new image for each background color, but the problem itself really annoys me.

The black line doesn't appear anywhere but between the two first background colors and only if both background colors are visible... o.O

Might be I need to use some other imagecopy function, but this is all so weird!

<?php

// image size
$x=500;
$y=100;

// creating transparent image
$im=imagecreatetruecolor($x,$y);
$tc=imagecolorallocatealpha($im,255,255,255,0);
imagefill($im,0,0,$tc);

// background colors
// the escaped lines is for making a background image transparent, to see where the black line appears
$bgc[]=array(255,0,0,0);
//$bgc[0]=array(255,0,0,127);
$bgc[]=array(0,255,0,0);
//$bgc[1]=array(0,255,0,127);
$bgc[]=array(0,0,255,0);
$bgc[]=array(0,255,255,0);

// adding backgrounds
// background count:
$bgcq=count($bgc);
// backgroundsize x,y:
$bgs=array(ceil($x),($y+1)/$bgcq);
// location:
$bgsl=0;
// last height:
$bgsh=0;
for($i=0;$i<$bgcq;$i++){
// start location for this background:
$bgsl+=$bgsh;
// calculating a round number for the background height
if($bgsl+$bgs[1]<round($bgs[1]+($bgs[1]*$i))){
	$bgsh=ceil($bgs[1]);
}else{
	$bgsh=floor($bgs[1]);
}
// creating background image:
$bg=imagecreatetruecolor($bgs[0],$bgsh);
// filling background image with set color
$abgc=imagecolorallocatealpha($bg,$bgc[$i][0],$bgc[$i][1],$bgc[$i][2],$bgc[$i][3]);
imagefill($bg,0,0,$abgc);
// pasting background on image (imagecopy gives the same result)
imagecopyresampled($im,$bg,0,$bgsl,0,0,$bgs[0],$bgsh,$bgs[0],$bgsh);
// to see the values (test purpose), must escape header and imagepng functions
//echo $bgsl.'-'.($bgsl+$bgsh).'<br />'.$bgsh.'<br />';
}

// output, remember to escape it to echo variables
header('Content-type: image/png');
imagepng($im,NULL,0);

?>

I've tried to make the script as understandable and easy as possible...

 

anyone got any ideas about what is wrong here, and how to maybe fix it?

[Psycho]

I've tried the code above and don't see any black line (I also tried uncommenting the two lines specified). Are you running that code with any different values?

[MMDE]

not really, but I did edit the code in the post after posting it... I forgot to escape one of the invisible colors... (so the second color line was invisible instead of green).

 

But I rewrote the code a little bit, so it just puts in rectangles instead and should be way better to use.

 

Still the same problem though!

 

<?php

// image size
$x=500;
$y=100;

// creating transparent image
$im=imagecreatetruecolor($x,$y);
$tc=imagecolorallocatealpha($im,255,255,255,0);
imagefill($im,0,0,$tc);

// background colors
// the escaped lines is for making a line transparent, to see where the black line appears
$bgc[]=array(255,0,0,0);
//$bgc[0]=array(255,0,0,127);
$bgc[]=array(0,255,0,0);
//$bgc[1]=array(0,255,0,127);
$bgc[]=array(0,0,255,0);
$bgc[]=array(0,255,255,0);

// adding backgrounds
// background count:
$bgcq=count($bgc);
// backgroundsize x,y:
$bgs=array($x,($y+1)/$bgcq);
// location:
$bgsl=0;
// last height:
$bgsh=0;
for($i=0;$i<$bgcq;$i++){
// start location for this background:
$bgsl+=$bgsh;
// calculating a round number for the background height
if($bgsl+$bgs[1]<round($bgs[1]+($bgs[1]*$i))){
	$bgsh=ceil($bgs[1]);
}else{
	$bgsh=floor($bgs[1]);
}
// creating selected color
$abgc=imagecolorallocatealpha($im,$bgc[$i][0],$bgc[$i][1],$bgc[$i][2],$bgc[$i][3]);
// adding rectangular with created color
imagefilledrectangle($im,0,$bgsl,$bgs[0],$bgsl+$bgsh,$abgc);
// to see the values (test purpose), must escape header and imagepng functions
//echo $bgsl.'-'.($bgsl+$bgsh).'<br />'.$bgsh.'<br />';
}

// output, remember to escape it to echo variables
header('Content-type: image/png');
imagepng($im,NULL,0);

?>

 

the problem is between the red and the green color! if you can't see the black stripe, then you need to zoom in! I for sure do see it! It's very small though, but it's very important that there is no such black stripe!

 

here is a picture of what I see:

[Kieran Menor]

You know, it's probably just your monitor. It looks fine to me. Especially on LCDs, some colors placed next to each other can blend together seemingly creating a line or other artifacts.

[MMDE]

You know, it's probably just your monitor. It looks fine to me. Especially on LCDs, some colors placed next to each other can blend together seemingly creating a line or other artifacts.

hmm, might just be... but hmm, it gets more and more visible the more I zoom in on it!

 

I will try to see if I can fetch the color in an image editor...

[Kieran Menor]

Could be your imagination?

[MMDE]

Could be your imagination?

no

 

but I see how this may be confusing...

 

I opened it in GIMP 2 and zoomed in. Nowhere was the black stripe to see.

I then opened the same imagine in firefox and zoomed in. It created a black stripe again! :\

I took a screenshot:

can you see it now? ;p

[Psycho]

I don't think that line is "IN" the image. It is more likely an artifact caused by the rendering of the two colors next to each other with the colors butted up against each other. When running the code above I cannot see the line in IE or FF.

[MMDE]

I don't think that line is "IN" the image. It is more likely an artifact caused by the rendering of the two colors next to each other with the colors butted up against each other. When running the code above I cannot see the line in IE or FF.

I guess it's a rendering on the end-part problem then, just been bothering the heck out of me for hours! :\

Actually spent more hours on this than making transparent round corners on php created images like the one with this code without loading any kind of image... hmm

I wonder how it will be when I add many more colors, like a big rainbow! xD

[Psycho]

I was bored and decided this would work much better as a class.

 

EDIT: FYI: There was a problem with your logic for determining the Y start/end positions. Using a height of 100 your start/end values were 0-25, 25-51, 51-76, & 76-101. There are two problems there. One: the values should only go from 0 to 99 (not 101); Two: the rectangles overlapped. The overlapping might account for the problem you saw with the dark line. The code below corrects both issues and calculates the start/end values as: 0-24, 25-49, 50-74, & 75-99

 

 

Use $bgImage->outputBGImage(true); to output the debugging code instead of the image.

 

<?php
    
class createBGImage
{
    var $width;
    var $height;
    var $bgColorsAry = array();
    
    function createBGImage($width, $height)
    {
        $this->width  = $width;
        $this->height = $height;
        return;
    }
    
    function addBackground($red, $green, $blue, $alpha)
    {
        $this->bgColorsAry[] = array($red, $green, $blue, $alpha);
        return;
    }
    
    function outputBGImage($debug=false)
    {
        //Create ouput image object
        $imageObj = imagecreatetruecolor($this->width, $this->height);
        $transBackground = imagecolorallocatealpha($imageObj, 255, 255, 255, 0);
        imagefill($imageObj, 0, 0, $transBackground);
    
        //Calculate background height
        $bgHeight = ($this->height/count($this->bgColorsAry));
    
        foreach($this->bgColorsAry as $idx => $bgColorAry)
        {
            //Calclate bg y start and end
            $bg_y_start = round(($idx) * $bgHeight);
            $bg_y_end   = round(($idx+1) * $bgHeight) - 1;
    
            //Get color parameters
            list($red, $grn, $blu, $alpha) = $bgColorAry;
    
            if($debug)
            {
                echo "<b>BG{$idx}:</b> y_pos: {$bg_y_start}/{$bg_y_end}, Red: {$red}, Grn: {$grn}, Blue: {$blu}, Alpha: {$alpha}<br />\n";
            }
            else
            {
                // Create background color identifier
                $bgColorObj = imagecolorallocatealpha($imageObj, $red, $grn, $blu, $alpha);
                //Add background color
                imagefilledrectangle($imageObj, 0, $bg_y_start, $this->width-1, $bg_y_end, $bgColorObj);
            }
        }
        //Output the image
        if(!$debug)
        {
            header('Content-type: image/png');
            imagepng($imageObj, NULL, 0);
        }
    }
}
    
//Create the image
$bgImage = new createBGImage(500, 100);
$bgImage->addBackground(255, 0, 0, 0);
$bgImage->addBackground(0, 255, 0, 0);
$bgImage->addBackground(0, 0, 255, 0);
$bgImage->addBackground(0, 255, 255, 0);
$bgImage->outputBGImage();
    
exit();
    
?>

 

 

[MMDE]

the +1 somewhere in there was just from some testing, forgot to remove it, but it makes no real difference though! (just makes it put less of the different colors on the actual screen by one pixel)

 

EDIT: oh you saw that too! lol

 

also, I can see the debugging code says the image is correct though

 

EDIT 2: From:0 To:99 = 100 pixels, or am I wrong?

 

EDIT 3: I still see the black line though! lulz

[BlueSkyIS]

mjdamato's code runs fine for me and i see no black line in firefox.

[MMDE]

mjdamato's code runs fine for me and i see no black line in firefox.

I know, it's probably just some rendering problem of some sort on my side :s

(not my laptop though)

Running:

Windows 7 64bit

Firefox 3.6.7

ATI Mobility Radeon HD 560v

True Color 32bit

got no idea what the name of the screen is

Intel T4500

[Psycho]

 

also, I can see the debugging code says the image is correct though

 

EDIT 2: From:0 To:99 = 100 pixels, or am I wrong?

 

When I ran your code above (with the debug echo line) I got the values: 0-25, 25-51, 51-76, & 76-101. It was MY code that generated the values 0-24, 25-49, 50-74, & 75-99. Even when I removed the +1 from your code I got imperfect values. Besides, your code was overly complex. All you need is

        //Before the loop
        $bgHeight = ($this->height/count($this->bgColorsAry));
//In the loop
        $bg_y_start = round(($idx) * $bgHeight);
        $bg_y_end   = round(($idx+1) * $bgHeight) - 1;

 

As I stated, there is a good possibility that the dark line is due to the fact that your code was generating an overlap between colors. Try my code and see what you get.

[Psycho]

Do you actually see that line when you view the image in the page or only when you take a screenshot? If I take a screenshot and view that image in a larger size I do see the line. But, if I use the Windows magnifier to view the actual image in IE or FF at a much larger size, there is no dark line. So, in my situation it looks like the dark line is only there when I take a screenshot, so it is an artifact of that process and has nothing to do with the image generation.

 

EDIT: Correction, the line is only visible when I take a screenshot AND save that as a JPG. That makes sense since JPG is a lossy format and will do things like that. If I save the SS as a GIF/PNG there is still no visible line.

[MMDE]

 

also, I can see the debugging code says the image is correct though

 

EDIT 2: From:0 To:99 = 100 pixels, or am I wrong?

 

When I ran your code above (with the debug echo line) I got the values: 0-25, 25-51, 51-76, & 76-101. It was MY code that generated the values 0-24, 25-49, 50-74, & 75-99. Even when I removed the +1 from your code I got imperfect values. Besides, your code was overly complex. All you need is

        //Before the loop
        $bgHeight = ($this->height/count($this->bgColorsAry));
//In the loop
        $bg_y_start = round(($idx) * $bgHeight);
        $bg_y_end   = round(($idx+1) * $bgHeight) - 1;

 

As I stated, there is a good possibility that the dark line is due to the fact that your code was generating an overlap between colors. Try my code and see what you get.

the +1 was added due to me testing for different result, not that I really thought it would make a difference, but I had edited a lot of more stuff too, just hoping to find out the problem... o.O

It should have been -1! and then it would have made sense!

 

Anyways, yeah, maybe it shouldn't overlap, but I did run your code, and I can still see the black stripe! xD

 

EDIT:

yes I see that line, pretty clearly actually when I look for it, even without even zooming or screenshooting it.

[BlueSkyIS]

maybe your browser is caching the image? try renaming the script and see if you get the same results.

 

otherwise, maybe your GD is messed up or some other part of your PHP, or your monitor screen or the color settings in your OS.

[MMDE]

maybe your browser is caching the image? try renaming the script and see if you get the same results.

 

otherwise, maybe your GD is messed up or some other part of your PHP, or your monitor screen or the color settings in your OS.

lol, no, it's not because it cached it, I actually made a new php file for testing it! =p

 

again, I don't think it has to do with my GD, neither about my screen, etc etc etc

 

Just because you ask, I tested now again...

 

I created a new php file with that script. I got the image up in my netbrowser. It still has the black stripe. I saved it on my computer with a totally new name. I open it in windows image viewer or whatever it's called. I don't see the black stripe there, not even if I zoom in! =P I open the image from my computer in the netbrowser and I see the black stripe again, especially if I zoom! =\

 

but it's okay, I know the image is correct even if my netbrowser on this computer won't show it correctly...