kostenloser Webspace werbefrei: lima-city

Farbe ermitteln

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

anzeigen ausgeben bild code datei ermitteln farbe grafik helfen http koordinate laden mache maus nutzen offset palette parameter punkt url
    1. 1
    2. 2
    3. »
  1. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    14:28, 13.12.2009
    Hi
    Ich habe eine Grafik (Farbkreis) und möchte jetzt, dass wenn ich mit der Maus über die Grafik fahre, unten der HEX-Code für die Farbe über der die Maus gerade ist angezeigt wird. KURZ: ich möchte die Farbe des Pixels auf das die Maus gerade zeigt ermitteln und anzeigen.

    Das man mit javascript die Mausposition ermitteln kann weis ich und daher dachte ich dass das auch irgendwie geht... war nur doch schwerer als ich dachte xD eher unglaublich viel schwerer.

    Hoffe ihr wisst wie ich das realisieren kann und könnt mir helfen - google nähmlich schon seit heute morgen und finde einfach garnix :(

    MFG

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. a************n

    14:31, 13.12.2009 
    <?php
// datei name
$imgfile='palette.png';
// bild laden
$img=imagecreatefrompng($imgfile);
// offset (klick) koordinaten
$offsetx=$_GET['offsetx'];
$offsety=$_GET['offsety'];
// farbe ermitteln
$rgb = ImageColorAt($img, $offsetx, $offsety);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
// farbe ausgeben
printf('#%02s%02s%02s', dechex($r), dechex($g), dechex($b));
?>


    das ganze gibt dir dan die farbe aus...
    edit:
    ach ja es gibt das gane als vollen rgb wert aus (bsp: #ff0000)
    /edit;
    wobei 2 get parameter erwartet werden....

    solltest du anpassen können

    mfg andre

    Beitrag zuletzt geändert: 13.12.2009 14:32:54 von andre-morillon
  4. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    14:40, 13.12.2009
    Danke für die schnelle Antwort doch das klappt irgendwie nicht.

    ich hab folgendes eingegeben:
    <?php
// datei name
$imgfile='spectrum.png';
// bild laden
$img=imagecreatefrompng($imgfile);
// offset (klick) koordinaten
$offsetx=$_GET['offsetx'];
$offsety=$_GET['offsety'];
// farbe ermitteln
$rgb = ImageColorAt($img, $offsetx, $offsety);
$r = ($rgb >> 16) & 0xFF;
$g = ($rgb >> 8) & 0xFF;
$b = $rgb & 0xFF;
// farbe ausgeben
printf('#%02s%02s%02s', dechex($r), dechex($g), dechex($b));
?>


    und da wird dann das Bild nicht angezeigt.

  5. a************n

    14:53, 13.12.2009
    nein ich habe auch nie gesagt das das bild angezeigt wird...

    ich habe dich so verstanden das du die farbe an dem punkt der maus haben willst...

    dh. du bindest das bild über html ein, dann auf klick berechnest du den abstand der maus zum bildrand (x und y)...

    danach kannst du einen ajax request auf den von mir geposteten code machen und als parameter übergibst du dann ?offserx=/x-wert/&offsety=/y-vert/ dann bekommst als resultat die farbe an dem punkt wo geklickt wurde....

    du kannst das bild aber ach als sbubmit butten machen... dann wird der oofset vom browser berechnet und als parameter mit übergeben (heißt dann aber nur x und y nicht offsetx oder offsety)

    mfg andre
  6. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    14:55, 13.12.2009
    Klar aber das Bild solld die ganze zeit über eingeblendet sein! Und wenn ich mit der Maus über das Bild fahre, soll er mir den jeweiligen Farbcode anzeigen.

  7. a************n

    15:00, 13.12.2009
    ok....
    <img src="die palette.png" alt="farbpalette" onlick="myFKT()"/>

    so waäre schon mal das bild suíchtbar...
    rein über js kannst die farbe nicht (so leicht) ermitteln... deswegen würde ich es auf klickt mittels ajax machen was deutlich leichter ist...

    eigentlich sollte es auch so klar sein

    mfg andre

    //edit:
    du weißt was ein ajax request ist?
    und wenn du es über js machen willst: es gibt dafür ein jQuery plugin

    Beitrag zuletzt geändert: 13.12.2009 15:02:53 von andre-morillon
  8. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    15:09, 13.12.2009
    Ok Totale Überforderungen.
    Was ist ein Ajax request??? noch nie gehört
    JQuery kenn ich ist mir aber zu kompliziert(also hab mich noch nie damit auseinander gesetzt)

    Kannst du mir das noch mal erklären wie ich das machen soll??
    und wegen dem php-code kann ich den jetzt noch benutzen oder nicht??

  9. a************n

    15:33, 13.12.2009
    also den php code kannst du selbstverständlich nutzen...
    ajax steht für asyncronus javascript and xml... dh. du rufts den server im hintergrund auf (dafür würde ich dir wieder jquery empfehlen)

    also ein bsp:
    <img src="palette.png" alt="palette" id="palette"/>

    der js teil (jquery vorausgesetzt)
    $('#palette').click(function(){
  x = //relativ zum bild ermitteln
  y = //relativ zum bild ermitteln
  $.get('get_color.php',{offsetx:x,offsety:y},function(r){
      alert('die Farbe lautet:' + r);
  });
});

    wobei get_color.php der php code wäre

    und das pugin ist auch nicht schwer zu nutzen 
    $('input.color').gccolor();





    Beitrag zuletzt geändert: 13.12.2009 15:36:31 von andre-morillon
  10. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    15:47, 13.12.2009
    Also mein Code schaut jetzt so aus:
    <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#palette').click(function(){
  x = //relativ zum bild ermitteln
  y = //relativ zum bild ermitteln
  $.get('get_color.php',{offsetx:x,offsety:y},function(r){
      alert('die Farbe lautet:' + r);
  });
});
</script>
</head>
<body>
<img src="spectrum.png" alt="palette" id="palette"/>
</body>
</html>


    Doch wenn ich über das Bild fahre passiert garnix.

    Was mache ich da jetzt falsch??

  11. a************n

    15:59, 13.12.2009
    naja du musst klicken....

    und x sowie y noch berechnen
  12. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    16:02, 13.12.2009
    Ja wie mach ich denn sowas?? Ich hab da Kein Plan!!

  13. a************n

    16:10, 13.12.2009 
    <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var offsetX = 0;
var offsetY = 0;

function getMouseXY(e) 
{
	var oPalette = document.getElementById("palette");
	var oTd = document.getElementById("colorpicker"); 
	// browser specific 
	if(window.ActiveXObject)
	{
		mouseX = window.event.x + document.body.scrollLeft;
		mouseY = window.event.y + document.body.scrollTop;    
	}
	else
	{
		mouseX = e.pageX;
		mouseY = e.pageY;
	}
	
	offsetX = mouseX;
    offsetY = mouseY;
	
	if(window.ActiveXObject)
    {
		offsetX = window.event.offsetX;
		offsetY = window.event.offsetY;  
    } 
    else 
    {
		offsetX -= oPalette.offsetLeft + oTd.offsetLeft;
		offsetY -= oPalette.offsetTop + oTd.offsetTop;
    } 
   $.get('get_color.php',{offsetx:offsetX ,offsety:offsetY },function(r){
      alert('die Farbe lautet:' + r);
  });
}

</script>
</head>
<body>
<div id="outerpalette">
 <img src="spectrum.png" alt="palette" id="palette" onclick="getMouseXY(event);"/>
</div>
</body>
</html>


    ist aber nicht getestet

    mfg andre
  14. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    16:18, 13.12.2009
    Leider passiert da genausowenig wie vorher.

  15. a************n

    16:32, 13.12.2009
    lad das ganze doch bitte mal hoch...


    mfg andre
  16. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    16:40, 13.12.2009 
    <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var offsetX = 0;
var offsetY = 0;

function getMouseXY(e) 
{
	var oPalette = document.getElementById("palette");
	var oTd = document.getElementById("colorpicker"); 
	// browser specific 
	if(window.ActiveXObject)
	{
		mouseX = window.event.x + document.body.scrollLeft;
		mouseY = window.event.y + document.body.scrollTop;    
	}
	else
	{
		mouseX = e.pageX;
		mouseY = e.pageY;
	}
	
	offsetX = mouseX;
    offsetY = mouseY;
	
	if(window.ActiveXObject)
    {
		offsetX = window.event.offsetX;
		offsetY = window.event.offsetY;  
    } 
    else 
    {
		offsetX -= oPalette.offsetLeft + oTd.offsetLeft;
		offsetY -= oPalette.offsetTop + oTd.offsetTop;
    } 
   $.get('get_color.php',{offsetx:offsetX ,offsety:offsetY },function(r){
      alert('die Farbe lautet:' + r);
  });
}

</script>
</head>
<body>
<div id="outerpalette">
 <img src="spectrum.png" id="palette" onclick="getMouseXY(event);"/>
</div>
</body>
</html>

  17. a************n

    16:43, 13.12.2009
    du solltest es nicht posten, das habe ich ja schon getan .... du solltest es auf deinen webspace hochladen (mit der grafik) da ich die grafik nicht habe und dir somit auch nicht helfen kann .....


    mfg andre
  18. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    16:49, 13.12.2009
    Sorry! Hab mich auch schon gewundert xD
    Also hier ist die Seite: http://programtools.lima-city.de/Spectrum.html
    Das Bild ist hier: http://programtools.lima-city.de/spectrum.png
    und JQuery hab ich auch drauf!

  19. a************n

    17:09, 13.12.2009
    so hab den fehler gefunden...

    <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var offsetX = 0;
var offsetY = 0;

function getMouseXY(e) 
{
	var oPalette = document.getElementById("palette");
	var oTd = document.getElementById("outerpalette"); 
	// browser specific 
	if(window.ActiveXObject)
	{
		mouseX = window.event.x + document.body.scrollLeft;
		mouseY = window.event.y + document.body.scrollTop;    
	}
	else
	{
		mouseX = e.pageX;
		mouseY = e.pageY;
	}
	
	offsetX = mouseX;
    offsetY = mouseY;
	
	if(window.ActiveXObject)
    {
		offsetX = window.event.offsetX;
		offsetY = window.event.offsetY;  
    } 
    else 
    {
		offsetX -= oPalette.offsetLeft + oTd.offsetLeft;
		offsetY -= oPalette.offsetTop + oTd.offsetTop;
    } 
   $.get('get_color.php',{offsetx:offsetX ,offsety:offsetY },function(r){
      alert('die Farbe lautet:' + r);
  });
}

</script>
</head>
<body>
<div id="outerpalette">
 <img src="spectrum.png" id="palette" onclick="getMouseXY(event);"/>
</div>
<script src="http://layer.lima-city.de/support_layer.php" type="text/javascript"></script></body>
</html>


    im js part war ne falsche id... ach und die php datei musst du natürlich auch hochladen (mit dem namen get_color.php)

    dann gehts auch (wenn du in der php datei dann auch den bildpfad angepasst hast)
  20. Autor dieses Themas

    programtools

    programtools hat kostenlosen Webspace.

    17:23, 13.12.2009
    Vielen Dank!!!
    Klappt jetzt alles nur wie kann ich das in HEX-Code umwandeln um Divs mit der Ausgewählten Farbe einzufärben??

  21. a************n

    17:29, 13.12.2009
    du hast es schon richtig...

    du solltest ggf. noch die alertbox rausnehmen...

    mach mal bei dem dic #sh2 als style
    height: 100px; width: 300px;

    und schon siehst du es ... es geht halt nicht wenn du das als attribut machst.

    also 

    <html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var offsetX = 0;
var offsetY = 0;

function getMouseXY(e) 
{
	var oPalette = document.getElementById("palette");
	var oTd = document.getElementById("outerpalette"); 
	// browser specific 
	if(window.ActiveXObject)
	{
		mouseX = window.event.x + document.body.scrollLeft;
		mouseY = window.event.y + document.body.scrollTop;    
	}
	else
	{
		mouseX = e.pageX;
		mouseY = e.pageY;
	}
	
	offsetX = mouseX;
    offsetY = mouseY;
	
	if(window.ActiveXObject)
    {
		offsetX = window.event.offsetX;
		offsetY = window.event.offsetY;  
    } 
    else 
    {
		offsetX -= oPalette.offsetLeft + oTd.offsetLeft;
		offsetY -= oPalette.offsetTop + oTd.offsetTop;
    } 
   $.get('get_color.php',{offsetx:offsetX ,offsety:offsetY },function(r){
      
      document.getElementById('sh1').value = r;
      document.getElementById('sh2').style.backgroundColor=r;
  });
}

</script>
</head>
<body>
<div id="outerpalette">
 <img src="spectrum.png" id="palette" onclick="getMouseXY(event);"/>
</div>
<script src="http://layer.lima-city.de/support_layer.php" type="text/javascript"></script></body>
<input type="Text" id="sh1" />
<div id="sh2" style="width;100px; height:70px;"></div>
</html>


    wenn du willst kannst du sogar dem textfeld diese farbe geben


    mfg andre

    ps: er berechnet das offset noch nicht richtig... musst du mal gucken das dus hinbekommst

    Beitrag zuletzt geändert: 13.12.2009 17:30:32 von andre-morillon

  22. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

    1. 1
    2. 2
    3. »

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!