Colorpicker für mehrere ID's

[CreativPur]

Hi,
ich habe einen Colorpicker, der mir die Grundfarben eines IMG herauszieht und diese mir auch ausgibt.
Nun möchte ich ein zweites Color-Picker-System dahin ausrichten, das ich Schriften mit verschiedenen Id's über die vorgegebenen Grundfarben farblich verändern kann.
Ich habe mein Script soweit hin bekommen, dass es zumindest die erste ID anspricht.
Leider funktioniert es nicht bei den folgenden Id's.

Hier sind meine Quelltexte..

Hier werden aus dem IMG die Grundfarben erstellt.

require_once("../system/head.php");

$num_results = (! empty($_POST['num_results'])) ? $_POST['num_results'] : 20;
$delta = (! empty($_POST['delta'])) ? $_POST['delta'] : 20;
$reduce_brightness = (isset($_POST['reduce_brightness'])) ? $_POST['reduce_brightness'] : 1;
$reduce_gradients = (isset($_POST['reduce_gradients'])) ? $_POST['reduce_gradients'] : 1;
include_once("colors.inc.php");
$ex=new GetMostCommonColors();
$colors=$ex->Get_Color("bg_img/41566161179785095188335810978828103598-hintergrundbild.jpg", $num_results, $reduce_brightness, $reduce_gradients, $delta);

Hier der Quelltext, der das IMG und die Grundfarben ausgibt.

<link rel="stylesheet" type="text/css" href="bootstrap-colorpicker.css">      
<script type="text/javascript" src="bootstrap-colorpicker.js"></script>       
 
   
<style type="text/css">
img {
width: 100%;
}
.header_inhalt {
float: right;
z-index: 1;
}
p {
font-size:12px;
}
   
.square_header_text  {
border: solid #000 1px;
margin-top:3px;
margin-right:3px;
height:18px;
width 10px;       
    }
.square_anschreiben_text {
border: solid #000 1px;
margin-top:3px;
margin-right:3px;
height:18px;
width 10px;               
    }   
</style>


    <div class="container" style="margin-top: 150px;">
        <div class="row">
            <div class="col-lg-6">
                <div class="col-lg-12">
                    <table width="100%" border="1">
                        <tr>
                            <td class="header_inhalt over"  height="230">
                                <span><img src="https://bewerbungsemail.de/bewerber/Design/bg_img/41566161179785095188335810978828103598-hintergrundbild.jpg" width="40" height="230" alt="" class="over2"/> </span>
                            </td>
                        </tr>
                        <tr height="100" class="header_text" id="target-square_header_text">
                            <td>
                                <br />
                                <h1>Das ist Test 1</h1>

                            </td>
                        </tr>
                        <tr height="100" class="anschreiben_text" id="target-square_anschreiben_text">
                            <td>
                                <h1>Das ist Test 2</h1>

                            </td>
                        </tr>
                    </table>
                </div>
            </div>   
            <div class="col-lg-6">
                <div class="col-lg-12">
                    <table width="100%">
                        <tr>
                            <td>
                                <p>Schriftfarbe<br /> zu Test 1</p>
                            </td>
                                <?php
                                    foreach ( $colors as $hex => $count )
                                    {
                                    if ( $count > 0 )
                                    {
                                ?>
                            <td>
                                <div class="col-lg-1 square_header_text" style="background-color:#<?php echo $hex ?>" data-color_header_text="#<?php echo $hex ?>">
                                    <div class="hidden">
                                        <input name="header_text" value="<?php echo $hex ?>">
                                    </div>
                                </div>
                            </td>
                            <?php
                            }
                        }
                        ?>
                        </tr>
                        <tr>
                            <td>
                                &nbsp;
                             </td>
                        </tr>
                        <tr>
                            <td>
                                <p>Schriftfarbe<br /> zu Test 2</p>
                            </td>
                                <?php
                                    foreach ( $colors as $hex => $count )
                                    {
                                    if ( $count > 0 )
                                    {
                                ?>
                            <td>
                                <div class="col-lg-1 square_anschreiben_text" style="background-color:#<?php echo $hex ?>" data-color_anschreiben_text="#<?php echo $hex ?>">
                                    <div class="hidden">
                                        <input name="anschreiben_text" value="<?php echo $hex ?>">
                                    </div>
                                </div>
                            </td>
                            <?php
                                }
                            }
                            ?>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>

window.onload = function() {
    var colorSquares = document.querySelectorAll('.square_header_text');
    for(var i = 0; i < colorSquares.length; i++) {
        colorSquares[i].addEventListener('click', function() {
            setColor(this);
        });
    }
};
function setColor(element_header_text) {
    var targetSquare = document.getElementById('target-square_header_text');
    var colorValue = element.getAttribute('data-color_header_text');
    targetSquare.style.color = colorValue;
  };


   
window.onload = function() {
    var colorSquares = document.querySelectorAll('.square_anschreiben_text');
    for(var i = 0; i < colorSquares.length; i++) {
        colorSquares[i].addEventListener('click', function() {
            setColor(this);
        });
    }
};
function setColor(element_anschreiben_text) {
    var targetSquare = document.getElementById('target-square_anschreiben_text');
    var colorValue = element.getAttribute('data-color_anschreiben_text');
    targetSquare.style.color = colorValue;
  };

Hat Jemand eine Idee, wo der Fehler liegt ?

 

[CreativPur]

So sieht das ganze Online aus

 

[Yaslaw]

Da dein Code keinerlei Kommentare beinhaltet kann ich nicht wirklich nachvollziehen was da gemacht wird.
Aber, du verwendest für irgendwas eine uns unbekannte PHP-Klasse Namens GetMostCommonColors. Keine Ahnung wozu du die nachher im brauchst.

Im Javascript ist die Funktion setColor() 2 mal definiert. Du weisst also nicht, welche davon ausgeführt wird. Wahrscheinlich wird jedesmal die Erste ausgeführt.

 

[CreativPur]

Die GetMostCommonColors wird nur für die Ausgabe der Grundfarben benötigt.
Und diese Ausgabe funktioniert ja auch. (Siehe Bild)

Ich werde mich jetzt nochmals an die Funktion setColor() wagen und mich wieder melden

 

[CreativPur]

Den Gedanke hatte ich auch schon.
Ich habe es jetzt folgend umgeändert.
Leider ohne Erfolg.

window.onload = function() {
    var colorSquares = document.querySelectorAll('.square_header_text');
    for(var i = 0; i < colorSquares.length; i++) {
        colorSquares[i].addEventListener('click', function() {
            setColor(this);
        });
    }
};
function setColor(element_header_text) {
    var targetSquare = document.getElementById('target-square_header_text');
    var colorValue = element.getAttribute('data-color_header_text');
    targetSquare.style.color = colorValue;
  };

window.onload = function() {
    var colorSquares = document.querySelectorAll('.square_anschreiben_text');
    for(var i = 0; i < colorSquares.length; i++) {
        colorSquares[i].addEventListener('click', function() {
            setColor2(this);
        });
    }
};

function setColor2(element_anschreiben_text) {
    var targetSquare = document.getElementById('target-square_anschreiben_text');
    var colorValue = element.getAttribute('data-color_anschreiben_text');
    targetSquare.style.color = colorValue;
  };

 

[CreativPur]

Selbst wenn ich das gesamte Script

window.onload = function() {
    var colorSquares = document.querySelectorAll('.square_header_text');
    for(var i = 0; i < colorSquares.length; i++) {
        colorSquares[i].addEventListener('click', function() {
            setColor(this);
        });
    }
};
function setColor(element_header_text) {
    var targetSquare = document.getElementById('target-square_header_text');
    var colorValue = element.getAttribute('data-color_header_text');
    targetSquare.style.color = colorValue;
  };

window.onload = function() {
    var colorSquares = document.querySelectorAll('.square_anschreiben_text');
    for(var i = 0; i < colorSquares.length; i++) {
        colorSquares[i].addEventListener('click', function() {
            setColor2(this);
        });
    }
};

function setColor2(element_anschreiben_text) {
    var targetSquare = document.getElementById('target-square_anschreiben_text');
    var colorValue = element.getAttribute('data-color_anschreiben_text');
    targetSquare.style.color = colorValue;
  };

weg lasse, funktioniert dennoch die erste Farbauswahl und die folgenden Farbauswahl nicht.
jetzt stehe ich voll auf dem Schlauch...

Im übrigens befindet sich GetMostCommonColors() im folgendem Script...

class GetMostCommonColors
{
    var $PREVIEW_WIDTH    = 150;
    var $PREVIEW_HEIGHT   = 150;

    var $error;

    /**
     * Returns the colors of the image in an array, ordered in descending order, where the keys are the colors, and the values are the count of the color.
     *
     * @return array
     */
    function Get_Color( $img, $count=20, $reduce_brightness=true, $reduce_gradients=true, $delta=16 )
    {
        if (is_readable( $img ))
        {
            if ( $delta > 2 )
            {
                $half_delta = $delta / 2 - 1;
            }
            else
            {
                $half_delta = 0;
            }
            // WE HAVE TO RESIZE THE IMAGE, BECAUSE WE ONLY NEED THE MOST SIGNIFICANT COLORS.
            $size = GetImageSize($img);
            $scale = 1;
            if ($size[0]>0)
            $scale = min($this->PREVIEW_WIDTH/$size[0], $this->PREVIEW_HEIGHT/$size[1]);
            if ($scale < 1)
            {
                $width = floor($scale*$size[0]);
                $height = floor($scale*$size[1]);
            }
            else
            {
                $width = $size[0];
                $height = $size[1];
            }
            $image_resized = imagecreatetruecolor($width, $height);
            if ($size[2] == 1)
            $image_orig = imagecreatefromgif($img);
            if ($size[2] == 2)
            $image_orig = imagecreatefromjpeg($img);
            if ($size[2] == 3)
            $image_orig = imagecreatefrompng($img);
            // WE NEED NEAREST NEIGHBOR RESIZING, BECAUSE IT DOESN'T ALTER THE COLORS
            imagecopyresampled($image_resized, $image_orig, 0, 0, 0, 0, $width, $height, $size[0], $size[1]);
            $im = $image_resized;
            $imgWidth = imagesx($im);
            $imgHeight = imagesy($im);
            $total_pixel_count = 0;
            for ($y=0; $y < $imgHeight; $y++)
            {
                for ($x=0; $x < $imgWidth; $x++)
                {
                    $total_pixel_count++;
                    $index = imagecolorat($im,$x,$y);
                    $colors = imagecolorsforindex($im,$index);
                    // ROUND THE COLORS, TO REDUCE THE NUMBER OF DUPLICATE COLORS
                    if ( $delta > 1 )
                    {
                        $colors['red'] = intval((($colors['red'])+$half_delta)/$delta)*$delta;
                        $colors['green'] = intval((($colors['green'])+$half_delta)/$delta)*$delta;
                        $colors['blue'] = intval((($colors['blue'])+$half_delta)/$delta)*$delta;
                        if ($colors['red'] >= 256)
                        {
                            $colors['red'] = 255;
                        }
                        if ($colors['green'] >= 256)
                        {
                            $colors['green'] = 255;
                        }
                        if ($colors['blue'] >= 256)
                        {
                            $colors['blue'] = 255;
                        }

                    }

                    $hex = substr("0".dechex($colors['red']),-2).substr("0".dechex($colors['green']),-2).substr("0".dechex($colors['blue']),-2);

                    if ( ! isset( $hexarray[$hex] ) )
                    {
                        $hexarray[$hex] = 1;
                    }
                    else
                    {
                        $hexarray[$hex]++;
                    }
                }
            }

            // Reduce gradient colors
            if ( $reduce_gradients )
            {
                // if you want to *eliminate* gradient variations use:
                // ksort( $hexarray );
                arsort( $hexarray, SORT_NUMERIC );

                $gradients = array();
                foreach ($hexarray as $hex => $num)
                {
                    if ( ! isset($gradients[$hex]) )
                    {
                        $new_hex = $this->_find_adjacent( $hex, $gradients, $delta );
                        $gradients[$hex] = $new_hex;
                    }
                    else
                    {
                        $new_hex = $gradients[$hex];
                    }

                    if ($hex != $new_hex)
                    {
                        $hexarray[$hex] = 0;
                        $hexarray[$new_hex] += $num;
                    }
                }
            }

            // Reduce brightness variations
            if ( $reduce_brightness )
            {
                // if you want to *eliminate* brightness variations use:
                // ksort( $hexarray );
                arsort( $hexarray, SORT_NUMERIC );

                $brightness = array();
                foreach ($hexarray as $hex => $num)
                {
                    if ( ! isset($brightness[$hex]) )
                    {
                        $new_hex = $this->_normalize( $hex, $brightness, $delta );
                        $brightness[$hex] = $new_hex;
                    }
                    else
                    {
                        $new_hex = $brightness[$hex];
                    }

                    if ($hex != $new_hex)
                    {
                        $hexarray[$hex] = 0;
                        $hexarray[$new_hex] += $num;
                    }
                }
            }

            arsort( $hexarray, SORT_NUMERIC );

            // convert counts to percentages
            foreach ($hexarray as $key => $value)
            {
                $hexarray[$key] = (float)$value / $total_pixel_count;
            }

            if ( $count > 0 )
            {
                // only works in PHP5
                // return array_slice( $hexarray, 0, $count, true );

                $arr = array();
                foreach ($hexarray as $key => $value)
                {
                    if ($count == 0)
                    {
                        break;
                    }
                    $count--;
                    $arr[$key] = $value;
                }
                return $arr;
            }
            else
            {
                return $hexarray;
            }

        }
        else
        {
            $this->error = "Image ".$img." does not exist or is unreadable";
            return false;
        }
    }

    function _normalize( $hex, $hexarray, $delta )
    {
        $lowest = 255;
        $highest = 0;
        $colors['red'] = hexdec( substr( $hex, 0, 2 ) );
        $colors['green']  = hexdec( substr( $hex, 2, 2 ) );
        $colors['blue'] = hexdec( substr( $hex, 4, 2 ) );

        if ($colors['red'] < $lowest)
        {
            $lowest = $colors['red'];
        }
        if ($colors['green'] < $lowest )
        {
            $lowest = $colors['green'];
        }
        if ($colors['blue'] < $lowest )
        {
            $lowest = $colors['blue'];
        }

        if ($colors['red'] > $highest)
        {
            $highest = $colors['red'];
        }
        if ($colors['green'] > $highest )
        {
            $highest = $colors['green'];
        }
        if ($colors['blue'] > $highest )
        {
            $highest = $colors['blue'];
        }

        // Do not normalize white, black, or shades of grey unless low delta
        if ( $lowest == $highest )
        {
            if ($delta <= 32)
            {
                if ( $lowest == 0 || $highest >= (255 - $delta) )
                {
                    return $hex;
                }
            }
            else
            {
                return $hex;
            }
        }

        for (; $highest < 256; $lowest += $delta, $highest += $delta)
        {
            $new_hex = substr("0".dechex($colors['red'] - $lowest),-2).substr("0".dechex($colors['green'] - $lowest),-2).substr("0".dechex($colors['blue'] - $lowest),-2);

            if ( isset( $hexarray[$new_hex] ) )
            {
                // same color, different brightness - use it instead
                return $new_hex;
            }
        }

        return $hex;
    }

    function _find_adjacent( $hex, $gradients, $delta )
    {
        $red = hexdec( substr( $hex, 0, 2 ) );
        $green  = hexdec( substr( $hex, 2, 2 ) );
        $blue = hexdec( substr( $hex, 4, 2 ) );

        if ($red > $delta)
        {
            $new_hex = substr("0".dechex($red - $delta),-2).substr("0".dechex($green),-2).substr("0".dechex($blue),-2);
            if ( isset($gradients[$new_hex]) )
            {
                return $gradients[$new_hex];
            }
        }
        if ($green > $delta)
        {
            $new_hex = substr("0".dechex($red),-2).substr("0".dechex($green - $delta),-2).substr("0".dechex($blue),-2);
            if ( isset($gradients[$new_hex]) )
            {
                return $gradients[$new_hex];
            }
        }
        if ($blue > $delta)
        {
            $new_hex = substr("0".dechex($red),-2).substr("0".dechex($green),-2).substr("0".dechex($blue - $delta),-2);
            if ( isset($gradients[$new_hex]) )
            {
                return $gradients[$new_hex];
            }
        }

        if ($red < (255 - $delta))
        {
            $new_hex = substr("0".dechex($red + $delta),-2).substr("0".dechex($green),-2).substr("0".dechex($blue),-2);
            if ( isset($gradients[$new_hex]) )
            {
                return $gradients[$new_hex];
            }
        }
        if ($green < (255 - $delta))
        {
            $new_hex = substr("0".dechex($red),-2).substr("0".dechex($green + $delta),-2).substr("0".dechex($blue),-2);
            if ( isset($gradients[$new_hex]) )
            {
                return $gradients[$new_hex];
            }
        }
        if ($blue < (255 - $delta))
        {
            $new_hex = substr("0".dechex($red),-2).substr("0".dechex($green),-2).substr("0".dechex($blue + $delta),-2);
            if ( isset($gradients[$new_hex]) )
            {
                return $gradients[$new_hex];
            }
        }

        return $hex;
    }
}

 

[CreativPur]

Ich komme immer noch nicht weiter...
Hat niemand eine Idee ?